Angular 9 系列（三）订阅动态组件事件

小渣渣

上一节回顾

Angular 9 系列（一）动态加载组件
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 系列（二）动态组件传参
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 系列（三）订阅动态组件事件
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 系列（四）自定义 Pipe 管道
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 系列（五）格式化金额货币格式
https://www.itsvse.com/thread-9249-1-1.html

本文章讲解，如果订阅动态组件的事件，我们知道普通的组件可以通过 () 绑定，如果绑定动态创建的事件呢？并且接受组件传递过来的参数。

Modal1Component 和 Modal2Component 组件是我们在主界面动态创建的组件。

我们修改 Modal1Component 组件，添加一个 input 输入框和按钮。当点击子组件按钮的时候，将值传回父组件，并且显示到父组件的界面。

先看效果图，如下：




Modal1 组件（动态创建的子组件）相关代码

modal1.component.html

登录可见。

modal1.component.ts

登录可见。

index 组件（父组件）相关代码

index.component.html

登录可见。

index.component.ts

登录可见。

如果报错：

Can't bind to 'ngModel' since it isn't a known property of 'input'

解决办法：

在你的app.module中添加如下代码即可：

登录可见。

我们就可以实现订阅动态创建的组件的事件了。

如果不考虑接收子组件的值的话，使用 HostListener 也可以接收到子组件的事件，然后根据 button 按钮名称做相应的处理。

在父组件 index.component.ts 添加如下代码：

登录可见。

这里的 e 指的是 $event.target ，如果你知道如何获取事件的参数的话，也可以从本文章回复留言。



（完）