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

Question

我有一个祖父组件显示一条消息说必须更新一个祖父child 组件上的字段。

一旦用户更新值并单击按钮，grandparent 的 HTML 元素必须立即消失。

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

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

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

我找到了 parent>child 和 child>parent 通信的解决方案，但没有找到祖父和祖父 child 的解决方案。

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);
}

祖父组件 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;
}

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

How can I hide a HTML element on a grandfather component after a button on a grandchild component is clicked?

html

angular-components

angular