Question

我在根组件上具有通用模态逻辑，以显示带有子组件使用@Output()属性传递的消息的模态。所有子组件都将值传递给与{p>相同的@Output()属性OpenModal

<first (OpenModal)="OpenModal($event)"></first>
<second (OpenModal)="OpenModal($event)"></second>

我可以从任何子组件中获得模态显示适当的消息。

但是问题是，我想将布尔值传递回调用组件。

如何确定哪个子组件导致输出属性的变化，并在关闭对话框后又如何将布尔值传递给子组件。

在https://stackblitz.com/edit/angular-xe3atu上实现概念的Stackblitz

PS：有没有更好的方法可以在根部实现通用的模态组件。请不要扩展。

Answer 1

您可以使用输入属性来检测更改并将更改添加到您的子组件中，但需要一些样板代码，例如ex：

HTML

<first (OpenModal)="OpenModal($event, 'first')" [sendData]="someData"></first>
<second (OpenModal)="OpenModal($event, 'second')" [sendData]="someData"></second>

TS


OpenModal(event, componentName) {
    this.someData = componentName
}

第一

someData: string = null;

ngOnChanges(changes: SimpleChanges): void { 
 if (changes.someData.currentValue != null && changes.someData.currentValue === 'first') 
  {
    console.log(changes.someData.currentValue); // here you can get the value from parent if and only if "someData" value is "first" 
  }
}

Answer 2

您可以在事件发射器中将值作为对象传递为对象，而不是如下所示的字符串，

@Output() OpenModal: EventEmitter<any> = new EventEmitter<any>();
@Input() response: string;

 OpenDialog(msg: string): void {
   this.OpenModal.emit({message:msg, parent: 'first'});
 }

因此，您可以从app.component.ts中识别出哪个组件正在发出事件

要从模式组件中获取布尔值，当前您正在使用factory在容器内创建组件，通过它您可以获取类似的值，

this.componentRef.instance.visible

但这不会在单击“是”或“否”时具有更新的值，因此，只要按照以下方法进行更新，就可以从中获取值，

i）创建“ visible”变量作为主题，并在应用程序组件中进行订阅。

（或）

ii）通过使用app.component.ts中的选择器而不是组件工厂来创建模型组件。根据第一个/第二个组件的输出有条件地显示或隐藏该组件。通过这种方式，我们可以通过直接将其作为模态组件的输出属性发出来获取布尔变量的值。

识别组件发射输出属性

2 个答案: