Angular 指令(Directive)属性型指令

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_31063463/article/details/77476085

Angular 指令(Directive)属性型指令

在Angular中有三种指令类型

  • 组件 :拥有模板的指令
  • 结构型指令:通过添加或移除DOM来改变DOM布局的指令
  • 属性型指令:改变元素,组件或其他指令的外观和行为的指令

自定义指令

这里写图片描述

之后将其到app.moduel中添加即可使用

这里写图片描述

@HostListener 监听宿主元素的事件或者是其他元素的事件

示例:
这里写图片描述

@Inout 数据从外向内传递,还可以为Input命别名

示例:
这里写图片描述
这里写图片描述

内置属性型指令

  • ngClass :可以同时添加或移除多个类
  • ngStyle :向DOM添加样式
  • ngModel:数据双向绑定

ngClass

示例:
这里写图片描述
这里写图片描述
这里写图片描述


ngStyle

示例:
这里写图片描述
这里写图片描述


ngModel

示例:
这里写图片描述
这里写图片描述

猜你喜欢

转载自blog.csdn.net/qq_31063463/article/details/77476085