angular - Visa/Dölj element inuti en komponent med hjälp av en tjänst

Jag skapade en Tabs-komponent och jag använder den på följande sätt (StackBlitz-exempel):

<tabs>

  <tab title="Tab 1">
    <div toolbar>
      <message><span>Message 1: </span></message>
      <span>Note 1</span>
    </div>
    <content1>
      <p>Content 1</p>
    </content1>
  </tab>

  <tab title="Tab 2">
    <div toolbar>
      <message><span>Message 2: </span></message>
      <span>Note 2</span>
    </div>
    <content2>
      <p>Content 2</p>
    </content2>
  </tab>

</tabs> 

Jag behöver dela några data inom varje tab så jag skapade en TabService:

@Injectable({
  providedIn: 'root' // >> Not sure if this should be in root ...
})

export class TabService {
  data: any;  
}

Som ett exempel definierade jag data inuti content1 som observerbar och använde det för att definiera data i TabService:

export class Content1Component implements OnInit {

  constructor(private tabService: TabService) { }

  ngOnInit() {

    this.getData().subscribe(x => {
      this.tabService.data = x;
    });

  }

  public getData() {

    let data$ = new Observable(observer => {
      setTimeout(() => {
        observer.next({ showMessage: true });
        observer.complete();
      }, 1000);
     });

     return data$;

  }

}

Och jag injicerar också den TabService inne i TabComponent:

@Component({
  selector: 'tab',
  templateUrl: './tab.component.html',
  styleUrls: ['./tab.component.css'],
  providers: [TabService]
})

export class TabComponent implements OnInit {

  @Input() active: boolean;
  @Input() title: string;

  constructor(private tabService: TabService) { }

  ngOnInit() {

    // I tried to log the value of tabService.data but it is undefined (??)
    this.tabService.data.subscribe(data => console.log(data));

  }

}

Fråga

Frågan är hur man döljer de två span-elementen i Tab 1, där content1 är:

    <message><span>Message 2: </span></message>
    <span>Note 2</span>

En är ett barn av tab1 och ett annat är ett barn av message som är ett barn av tab1?

Spannen bör döljas enligt värdet av showMessage i TabService-datapropertyn.

Det samma skulle också gälla för Flik 2 ... Både Flik 1 och Flik 2 bör bete sig oberoende av varandra.

Svar #1

Spannen ska döljas enligt värdet på showMessage i TabService-datapropertyn.

Med andra ord behöver du att en showMessage kommer att sättas enligt en prenumeration inuti TabService.

Här är ett litet exempel på en injicerbar tjänst med en showMessageSubscription, när .next(..) utlöses med dess nuvarande värde, kan varje annan komponent prenumerera på den med .subscribe(..).

tabs.service.ts:

@Injectable()
export class TabService {
    showMessageSubscription = new Subject<Boolean>();
    showMessage: Boolean;

    setShowMessage(showMessage: Boolean) {
        this.showMessage = showMessage;
        this.showMessageSubscription.next(this.showMessage);
    }
}

content1.component.ts:

export class Content1Component implements OnInit {
    showMessage: Boolean;
    private subscription: Subscription;
    constructor(private tabService: TabService) { }

    ngOnInit() {    
          this.subscription = this.tabService.showMessageSubscription
              .subscribe(
                (showMessage: Boolean) => {
                  console.log(showMessage);
                  this.showMessage = showMessage;
                }
          );

          this.fakeSetShowMessage();
    }

    public fakeSetShowMessage() {
        setTimeout(() => {
            this.tabService.setShowMessage(true);
        }, 1000);

        setTimeout(() => {
            this.tabService.setShowMessage(false);
        }, 5000);
    }
}

För att undvika minnesläckor behöver du implementera en OnDestroy:

ngOnDestroy() {
    this.subscription.unsubscribe();
}