在子组件中发出函数后从父函数获取返回值答案

【问题标题】：Get return value from parent function after emitting the function in child component在子组件中发出函数后从父函数获取返回值
【发布时间】：2020-11-30 23:36:05
【问题描述】：

我有子组件：

fixedheader.html

<button type="button" [hidden]="hideComponent()">
    Close
</button>

我想根据父组件中函数的返回值来隐藏它。

fixedheader.ts

@Output() ComponentHidden: EventEmitter<any> = new EventEmitter();

hideComponent() {
    this.ComponentHidden.emit();
}

parent.html

<app-fixedheader [currentPage]="'SaleEdit'" [menuTitle]="viewTitle" [validForSave]="validForSave" (ComponentHidden)="ComponentHidden('salesEditComponentRef2')">
</app-fixedheader>

parent.ts

ComponentHidden(id: string): boolean {
    let component = this.componentsReferences.find(i => i.viewId == id);
    return (component === undefined ? true : false);
}

所以这里我需要如何从父级获取返回值到子级，它应该基于此隐藏。

我错过了什么吗？

【问题讨论】：

如果你想让你的子组件基于父组件做一些事情，你的父组件应该向你的子组件输入值。基本上你的函数可以在你的父组件中设置一些标志，你可以将该标志输入到你的子组件中，然后它可以对更改做出反应。
你可以试试 parent.html 中的“ComponentHidden($event)”吗？

标签： angular observable eventemitter

【解决方案1】：

如果您希望父组件隐藏子组件，则父组件必须为此设置一个标志。像这样：

fixedheader.html

<button type="button" [hidden]="isHide">
    Close
</button>

fixedheader.ts

@Input() isHide : boolean;

parent.html

<app-fixedheader [currentPage]="'SaleEdit'" [menuTitle]="viewTitle" [validForSave]="validForSave" [isHide]="ComponentHidden('salesEditComponentRef2')">
</app-fixedheader>

parent.ts

ComponentHidden(id: string): boolean {
    let component = this.componentsReferences.find(i => i.viewId == id);
    return (component === undefined ? true : false);
}

【讨论】：