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

【问题标题】：click on one component, toggle another component through Angular services单击一个组件，通过 Angular 服务切换另一个组件
【发布时间】：2018-11-26 13:03:43
【问题描述】：

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

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>

【问题讨论】：

使用 get set 更新服务中的切换状态。
但是我从组件发送值，设置并投入服务会这样做吗？
这不起作用的原因是因为没有人“告诉”组件.toggle 值已更改。看看下面的答案如何解决
@JacopoSciampi 谢谢，但我选择了 toggleVal = true 但 onload，
是隐藏的，我想在加载时显示这个 div，点击它应该隐藏

标签： angular

【解决方案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>

【讨论】：

我选择了 toggleVal = true 但是在加载时，
是隐藏的，我想在加载时显示这个 div，点击它应该隐藏
默认设置为 false。在 ngOnInit() 你可以调用 this.sharedService.emitData();这将设置为 true 并显示 DIV 块。
所以默认我认为它是真的，然后我调用了 this.sharedService.emitData();在 comp2.component.ts 的 ngOnInit() 中，但仍然加载该 div 隐藏
stackblitz.com/edit/…。参考这个
默认情况下，你可以显示 Hello Angular 并点击隐藏它吗？