Angular 4-在没有EventEmitter的情况下访问子组件的事件

我正在尝试创建一个具有动态子组件的组件，如本例所示：。嗯，这很简单，我已经实现了。在我当前的例子中，我试图在MatDialog类中动态加载一个组件。参考文献：。到目前为止，一切顺利。我的动态组件类：

@Component({
    selector: 'dynamic-dialog',
    template: `<div class="ad-banner">
            <h3>{{title}}</h3>
            <ng-template dialog-host></ng-template>
          </div>`
    })
export class DialogComponent<T>
{

@ViewChild(DialogDirective) dialogHost: DialogDirective;
title:string;

constructor(
     public dialogRef: MatDialogRef<T>, @Inject(MAT_DIALOG_DATA) public                     
     data: any, component:T,
     private _toast: Toaster, private apiBase: apiBase, type: { new():                 
     T;},
     private componentFactoryResolver: ComponentFactoryResolver
    ){
        let componentFactory = this.componentFactoryResolver.resolveComponentFactory<Component>(type);
        let viewContainerRef = this.dialogHost.viewContainerRef;
        viewContainerRef.clear();
        let componentRef = viewContainerRef.createComponent(componentFactory);
        this.title = data.title;
  }
}

在字典中存储引用：

openGenericDialog<T>(t:T, data:{},
        type: { new(): T ;},
        height:string,
        width:string,
        key:string,  <=== added a unique key to be associated with the dialog 
        callback
        ): MatDialogRef<DialogComponent<T>> {
    let dialogRef = this.dialog.open(DialogComponent, {
                width: width,
                height:height,
                data: data
            });
            //add it in the dictionary
            this.dialogs[key] = dialogRef; <== storing the object in a dictionary using the unique key. 

     dialogRef.afterClosed().subscribe(result => {
        //when you close the box, it will return the control right here

        //remove from the dialog collection

        if(this.dialogs[key]){
            this.dialogs[key] = '';
        }

        if(callback){
            callback(result);
        }
        //write the closed event right here. 
    });

    return dialogRef;
}

---

好极了！感谢您的帮助：）

您可以在父组件中提供服务，也可以将其注入动态添加的子组件中进行通信

或者，您可以在子级中发出DOM事件，并在父级中侦听它们，例如在myCustomEvent（event）{…}上使用

@HostListener（'my-custom-event'，'[$event]'）

有关如何触发自定义事件的更多详细信息，请参阅




谢谢。我添加了我决定使用的解决方案。请你快速看一下，让我知道这是否是正确的方法。我认为是的，因为Angular非常基于客户端，我假设它在浏览器的同一个选项卡中会像一个魅力一样工作。你觉得怎么样？我觉得这个方法很好。我不知道“多个对话框”在应用程序上下文中的确切含义。也许你可以为每个对话框提供不同的对话框服务，但这取决于你如何设计你的应用程序，以及你到底想完成什么。好吧，你有点明白了，因为我需要为每个对话框使用单独的服务，我不希望这样，因为我真的想让它完全通用，或者，我需要一个解决方法，我可以使用单对话框服务。假设我有一个对话框，两个按钮，其中一个按钮打开另一个对话框。使用单一服务时，很难获得一个对话框的引用，这就是为什么使用键的原因。因此，我可以在需要时找到对话框对象。有意义吗？不是真的：D，但我对你的应用程序的架构了解不够，但正如我所说的，这种方法看起来不错。如果它对你有效，我认为这种方法没有任何问题。
@Injectable()
export class DialogService{

dialogs:any={};

constructor(public dialog: MatDialog) {}

openGenericDialog<T>(t:T, data:{},
        type: { new(): T ;},
        height:string,
        width:string,
        key:string,  <=== added a unique key to be associated with the dialog 
        callback
        ): MatDialogRef<DialogComponent<T>> {
    let dialogRef = this.dialog.open(DialogComponent, {
                width: width,
                height:height,
                data: data
            });
            //add it in the dictionary
            this.dialogs[key] = dialogRef; <== storing the object in a dictionary using the unique key. 

     dialogRef.afterClosed().subscribe(result => {
        //when you close the box, it will return the control right here

        //remove from the dialog collection

        if(this.dialogs[key]){
            this.dialogs[key] = '';
        }

        if(callback){
            callback(result);
        }
        //write the closed event right here. 
    });

    return dialogRef;
}

closeDialog(key:string, data:any){
    let dialogRef = this.dialogs[key];

    if(dialogRef){
        dialogRef.close(data);
    }
}