作者:手机用户2602918063 | 来源:互联网 | 2023-06-08 15:59
在Angular中有三种类型的指令:组件—拥有模板的指令。结构型指令—通过添加和移除DOM元素改变DOM布局的指令。属性型指令—改变元素、组件或其它指令的外观和行为
在 Angular 中有三种类型的指令:
组件 — 拥有模板的指令。
结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令。
属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。
组件
创建组件
在控制台输入ng generate component 组件名
新生成的组件,在src的app里面
创建完成后的文件有scss(我预设的样式文件为scss),html,ts,spec.ts四个文件,scss写样式,html写静态页面,ts写js代码,spec.ts测试使用
在app.module.ts
文件的装饰器下,自动声明了刚才新添加的组件
应用组件
在component.ts
文件中,@Component
就是一个装饰器,把product装饰成一个组件,selector决定改组件以什么标签被使用。
然后就可以在app.component.html
使用
标签来应用product组件了
这时候打开localhost:4200可以看到组件效果
属性型指令
属性型指令至少需要一个带有 @Directive 装饰器的控制器类。该装饰器指定了一个用于标识属性的选择器。 控制器类实现了指令需要的指令行为。
创建方式
例如创建一个highlight的属性型指令。这个指令在鼠标悬浮时给文字设置背景颜色。
先控制台新建指令
ng generate directive highlight
会生成TS文件src/app/highlight.directive.ts
现在编辑这个TS文件
使用import
语句从 Angular 的 core 库中导入一个 ElementRef
符号。
可以在指令的构造函数中注入 ElementRef
,来引用宿主 DOM 元素,
ElementRef
通过其 nativeElement
属性,让我们可以直接访问宿主 DOM 元素。
这里的第一个实现把宿主元素的背景色设置为了黄色。
使用方法
Highlight me!
Angular 在宿主元素
上发现了一个 appHighlight
属性。 然后它创建了一个 HighlightDirective
类的实例,并把所在元素的引用注入到了指令的构造函数中。 在构造函数中,该指令把
元素的背景设置为了黄色。
结构型指令
NgIf
该指令用于根据表达式的值,动态控制模板内容的显示与隐藏。
它与 AngularJS 1.x 中的 ng-if 指令的功能是等价的。
语法
...
NgFor
该指令用于基于可迭代对象中的每一项创建相应的模板。
它与 AngularJS 1.x 中的 ng-repeat 指令的功能是等价的。
语法
...
NgSwitch
Angular 的 NgSwitch 实际上是一组相互合作的指令:NgSwitch、NgSwitchCase 和 NgSwitchDefault。
一个值(hero.emotion)被被赋值给了 NgSwitch,以决定要显示哪一个分支。
NgSwitch 本身不是结构型指令,而是一个属性型指令,它控制其它两个 switch 指令的行为。 这也就是要写成 [ngSwitch] 而不是 *ngSwitch 的原因。
NgSwitchCase 和 NgSwitchDefault 都是结构型指令,因此要使用星号(*)前缀来把它们附着到元素上。
NgSwitchCase 会在它的值匹配上选项值的时候显示它的宿主元素。
NgSwitchDefault 则会当没有兄弟。
NgSwitchCase 匹配上时显示它的宿主元素。
写法
指令同时具有两种拼写形式大驼峰和小驼峰,比如NgIf 和 ngIf。 这里的原因在于,NgIf 引用的是指令的类名,而 ngIf 引用的是指令的属性名。
指令的类名拼写成大驼峰形式(NgIf),而它的属性名则拼写成小驼峰形式(ngIf)。
星号(*)
指令前加星号,是一个语法糖。
从内部实现来说,Angular 把 *ngIf 属性 翻译成一个
元素 并用它来包裹宿主元素。
比如下面的例子
{{hero.name}}
angular会将它翻译成
{{hero.name}}