单击一个组件，通过Angular服务切换另一个组件

Question

我有两个共享服务组件。 因此，点击一个组件中的按钮，更改另一个组件中的布尔值

shared.service.ts

 sharedService.toggle = false;

comp1.component.HTML

<button class="btn btn-primary" (click)="toggleme()">

comp1.component.ts

toggleme(){
this.sharedService.toggle = !this.sharedService.toggle
}

comp2.component.html

<div class="showHide" *ngIf="this.sharedService.toggle">
............
</div>

Answer 1

您可以为此使用主题/行为主题。

shared.service.ts

private toggleState = new Subject();
public toggleState$ = this.toggleState.asObservable();
private toggleVal = false;

emitData(){
   this.toggleVal = !this.toggleVal;
   this.toggleState.next(this.toggleVal);
}

comp1.component.ts

toggleme(){
   this.sharedService.emitData();
}

comp2.component.html

<div class="showHide" *ngIf="this.sharedService.toggleState$ | async">
............
</div>