单击孙组件上的按钮后，如何隐藏祖组件上的 HTML 元素？

Question

我有一个祖父组件，它显示一条消息，指出必须更新孙子组件上的字段。

一旦用户更新值并点击按钮，祖父母的 HTML 元素必须立即消失。

我的解决方案的简化模型如下：

<div [hidden]="buttonPressedOnGrandchild">
    <p>You must update the field X</p>
</div>

我需要将孙子组件的 buttonPressedOnGrandchild 的值设置为 true。或者使用其他解决方案来隐藏元素。

我找到了父母>孩子和孩子>父母沟通的解决方案，但不适用于祖孙沟通。

Answer 1

解决方案是服务。使用该服务设置孙子点击时的值，并让祖父订阅该值，以便在它发生变化时得到更新。

GrandfatherToGrandChildService

private buttonPressedOnGrandchild: Subject<boolean> = new Subject<boolean>();

// return the Subject as an Observable in order to be able to subscribe to it
public get buttonPressed(): Observable<boolean> {
    return this.buttonPressedOnGrandchild.asObservable();
}

// set the current value
public set buttonPressed(value: boolean) {
    this.buttonPressedOnGrandchild.next(value);
}

GrandfatherComponent TS

constructor(private grandfatherToGrandChildService: GrandfatherToGrandChildService){

}

ngOnInit(): void {
    // subscribe to the value and refresh the local variable whenever it changes
    this.grandfatherToGrandChildService.buttonPressed.subscribe( value => {
        this.buttonPressedOnGrandchild = value;
    });
}

GrandChildComponent TS

constructor(private grandfatherToGrandChildService: GrandfatherToGrandChildService){
}

onClick(): void {
    this.grandfatherToGrandChildService.buttonPressed = true;
}