架构师_程序员_码农网

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 6481|回复: 0

[Angular] Angular 9 系列(二)动态组件传参

[复制链接]
发表于 2020-6-2 14:57:07 | 显示全部楼层 |阅读模式
上一节回顾

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 组件是我们在主界面动态创建的组件,如果两个组件都有一个相同的输入参数,例如:name,我们可以定义一个接口。

通过angular-cli命令创建接口。

ng g interface IModalParameter

代码如下:


我们将 Modal1Component 和 Modal2Component 组件继承 IModalParameter 接口。



如果,我们组件不添加 @Input() name: string; 属性,组件将会报错,接口起了一个约束作用。

同时,我们编辑 index.component.ts 文件,修改 onClick 方法,代码如下:


interface.png

(完)




上一篇:.net/c# 获取当前方法名,参数名称
下一篇:Angular 9 系列(三)订阅动态组件事件
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2024-3-29 16:55

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表