Angular 9 系列（九）#id 选择器在页面应用

小渣渣

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元素属性中定义一个值，在其他标签中会多次用到此值。相同的值，我们希望只定义一次，而不是定义多次相同的值，这样维护起来也比较方便，

两种方式定义元素属性

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

登录可见。

第二种方式

登录可见。

效果图如下：



最后生成的html内容：

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

获取组件属性值

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

我们读取p标签tag属性值，代码：

登录可见。

ts 后台获取元素属性

登录可见。

登录可见。

触发组件事件

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

父组件引入子组件

登录可见。

子组件的方法

登录可见。

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

登录可见。

效果图如下：



（完）