架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 88|回复: 0

[Angular] Angular 9 系列(九)#id 选择器在页面应用

[复制链接]
发表于 2020-6-24 15:47:49 | 显示全部楼层
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

Angular 9 系列(六)调用原生JS变量和方法
https://www.itsvse.com/thread-9254-1-1.html

Angular 9 系列(七)css样式作用域
https://www.itsvse.com/thread-9264-1-1.html

Angular 9 系列(八)更新子组件的值通过set触发事件
https://www.itsvse.com/thread-9267-1-1.html

需求,在html元素属性中定义一个值,在其他标签中会多次用到此值。相同的值,我们希望只定义一次,而不是定义多次相同的值,这样维护起来也比较方便,

两种方式定义元素属性

第一种方式是我们最常见的方式,直接在元素标签内定义即可。

第二种方式

效果图如下:

element.png

最后生成的html内容:

<p _ngcontent-serverapp-c229="" tag="test" data-message-id="aaa">output: test </p>

获取组件属性值

angular 在组件html页面使用 #id 的方式,可以给元素增加一个标识,然后进行获取。

我们读取p标签tag属性值,代码:

ts 后台获取元素属性



触发组件事件

我们给组件通过 #id 选择器定义一个标识,还可以通过该标识触发组件的事件。

父组件引入子组件

子组件的方法

父组件按钮触发子组件的onMessage方法。

效果图如下:

alert.gif

(完)





上一篇:OpenLDAP 系列(三)OpenLDAP 命令详解
下一篇:OpenLDAP自定义objectclass和属性
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

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

Mail To:help@itsvse.com

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

GMT+8, 2020-7-8 12:54

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

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