angular官网-指令

参考：
内置指令：https://angular.cn/guide/template-syntax#built-in-directives
属性指令：
结构指令：

angular中的指令类型：

组件：一种拥有模板的指令。=> 最常用的
结构型指令：通过添加或者移除DOM元素，改变DOM布局的指令。=>修改视图结构。eg：NgIf，NgFor，NgSwitch。一般都是“ * ”开头。
使用：*ngIf，*ngFor，ngSwitch：ngSwitchCase和ngSwitchDefault。
属性型指令：改变元素、组件或其他指令的外观和行为的指令。=>改变一个元素的外观和行为。eg：NgStyle，NgClass。一般都是圆括号或者方括号。eg：（click），[ngClass]。

还可以分类为：内置指令 和 自定义指令。

使用：

注：可以在一个宿主元素上应用多个属性型指令，但只能应用一个结构型指令。
当两个指令放在同一个元素上时，谁先谁后？NgIf 优先还是 NgFor 优先？NgIf 可以取消 NgFor 的效果吗？

这种情况下有一个简单的解决方案：把 *ngIf 放在一个"容器"元素上，再包装进 *ngFor 元素。这个元素可以使用ng-container，以免引入一个新的 HTML 层级。

参考官网：
结构型指令：https://angular.cn/guide/structural-directives

指令的类名：大驼峰写法（UpperCamelCase）eg：NgIf ；
指令的属性名：小驼峰写法（lowerCamelCase）eg：*ngIf ；

命名规则：
大驼峰写法 UpperCamelCase
小驼峰写法 lowerCamelCase

星号(*)这个简写方法，是一个微语法，而不是通常的模板表达式。 Angular 会解开这个语法糖，变成一个 <ng-template> 标记，包裹着宿主元素及其子元素。每个结构型指令都可以用这个模板做点不同的事情。

*ngIf的内幕：

*ngIf是移除而不是隐藏。

a.当条件为假时，NgIf 会从 DOM 中移除它的宿主元素，取消它监听过的那些 DOM 事件，从 Angular 变更检测中移除该组件，并销毁它。这些组件和 DOM 节点可以被当做垃圾收集起来，并且释放它们占用的内存。

b.如果仅仅是display:none;的话：
当隐藏掉一个元素时，组件的行为还在继续 —— 它仍然附加在它所属的 DOM 元素上，它也仍在监听事件。Angular 会继续检查哪些能影响数据绑定的变更。组件原本要做的那些事情仍在继续。

内幕：

<div *ngIf="hero">{{hero.name}}</div>

星号是一个用来简化更复杂语法的“语法糖”。从内部实现来说，Angular 把 *ngIf 属性翻译成一个元素并用它来包裹宿主元素，代码如下：

<ng-template [ngIf]="hero"><div class="name">{{hero.name}}</div>
</ng-template>

属性：[ngIf]=‘hero’

*ngFor的内幕：

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">({{i}}) {{hero.name}}
</div>


<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"><div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>

属性：[ngForOf]=‘heroes’，[ngForTrackBy]="trackById，let-i=“index”，let-odd="odd"等。

具体的ngFor参数：https://blog.csdn.net/weixin_42995876/article/details/89501208

NgSwitch 内幕

Angular 的 NgSwitch 实际上是一组相互合作的指令：NgSwitch、NgSwitchCase 和 NgSwitchDefault。

<div [ngSwitch]="hero?.emotion"><app-happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></app-happy-hero><app-sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></app-sad-hero><app-confused-hero *ngSwitchCase="'app-confused'" [hero]="hero"></app-confused-hero><app-unknown-hero  *ngSwitchDefault           [hero]="hero"></app-unknown-hero>
</div>

NgSwitch 本身不是结构型指令，而是一个属性型指令。
NgSwitchCase 和 NgSwitchDefault 都是结构型指令。

<ng-template>指令

如果没有使用结构型指令，而仅仅把一些别的元素包装进 <ng-template> 中，那些元素就是不可见的。Angular 会把 <ng-template> 及其内容替换为一个注释。结构型指令会让 <ng-template> 正常工作。

<p>Hip!</p>
<ng-template><p>Hip2!</p>
</ng-template>
<p>Hooray!</p>

结果如下：

<ng-container>

Angular 的 <ng-container> 是一个分组元素，但它不会污染样式或元素布局，因为 Angular 压根不会把它放进 DOM 中。eg：<select> 元素要求直属下级必须为 <option>，那就没办法把这些选项包装进 <div> 或 <span> 中。
如下：会有问题的！

<select [(ngModel)]="hero"><span *ngFor="let h of heroes"><span *ngIf="showSad || h.emotion !== 'sad'"><option [ngValue]="h">{{h.name}} ({{h.emotion}})</option></span></span>
</select>

<ng-container> 是一个由 Angular 解析器负责识别处理的语法元素。它不是一个指令、组件、类或接口，更像是 JavaScript 中 if 块中的花括号。

写一个结构型指令

HTML：

<div>codition的值：{{condition}}</div>
<div>切换condition：<button (click)="condition=!condition;">切换</button></div>
<div *appUnless="condition">false-情况</div>
<div *appUnless="!condition">true-情况</div>

unless.directive.ts：

import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';@Directive({selector: '[appUnless]'
})
export class UnlessDirective {constructor(private templateRef: TemplateRef,private viewContainer: ViewContainerRef,) {}// *导入符号 Input、TemplateRef 和 ViewContainerRef，你在任何结构型指令中都会需要它们。*// 可以使用TemplateRef取得 <ng-template> 的内容，并通过ViewContainerRef来访问这个视图容器。@Input() set appUnless(condition: boolean) {if (!condition) {this.viewContainer.createEmbeddedView(this.templateRef);} else if (condition) {this.viewContainer.clear();}}// 一旦该值（condition）的条件发生了变化，Angular 就会去设置 appUnless 属性。因为不能用 appUnless 属性，所以你要为它定义一个设置器（setter）。//// 如果条件为假，并且以前尚未创建过该视图，就告诉视图容器（ViewContainer）根据模板创建一个内嵌视图。//// 如果条件为真，并且视图已经显示出来了，就会清除该容器，并销毁该视图。//// 没有人会读取 appUnless 属性，因此它不需要定义 getter。
}

ng g c hero-switch --flat=true -s -t

--flat=true 不生成文件夹，直接--flat也可以
-s即 --inlineStyle=true，css在组件内
-t 即--inlineTemplate=true，html在组件内

component中导出多个组件（多个组件放在一个页面）：

export const heroSwitchComponents =[ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ];

module中：

  declarations: [AppComponent,...heroSwitchComponents,// heroSwitchComponents, // 直接给数组也是可以的！],

写一个属性指令

<div appHighlight>我是新的内容</div>// js:
import {Directive, ElementRef} from '@angular/core';@Directive({selector: '[appHighlight]'
})
export class HighlightDirective {constructor(el: ElementRef) {el.nativeElement.style.backgroundColor = 'yellow';}}

改进：绑定事件！
使用 HostListener 装饰器添加两个事件处理器，它们会在鼠标进入或离开时进行响应。

import {Directive, ElementRef, HostListener} from '@angular/core';@Directive({selector: '[appHighlight]'
})
export class HighlightDirective {constructor(public el: ElementRef) {// el.nativeElement.style.backgroundColor = 'yellow';}@HostListener('mouseenter') onMouseEnter() {this.highlight('yellow');}@HostListener('mouseleave') onMouseLeave() {this.highlight(null);}private highlight(color: string) {this.el.nativeElement.style.backgroundColor = color;}
}

其中：

<p appHighlight highlightColor="yellow">Highlighted in yellow</p>
<p appHighlight [highlightColor]="'orange'">Highlighted in orange</p>

有这两种写法！

改进：用户传入颜色！

<div [appHighlight]='color'>我是新的内容</div>import {Directive, ElementRef, HostListener, Input} from '@angular/core';@Directive({selector: '[appHighlight]'
})
export class HighlightDirective {constructor(public el: ElementRef) {// el.nativeElement.style.backgroundColor = 'yellow';}@Input('appHighlight') highlightColor: string;  // 指定别名！@HostListener('mouseenter') onMouseEnter() {this.highlight(this.highlightColor);}@HostListener('mouseleave') onMouseLeave() {this.highlight(null);}private highlight(color: string) {this.el.nativeElement.style.backgroundColor = color;}
}

加上默认值：

<div [appHighlight]='color'>我是新的内容</div>
<div appHighlight>我是新的内容</div>this.highlight(this.highlightColor || 'red');

改进：多个属性时：eg：自定义一个颜色，默认给一个基本色，再然后是实在没办法的默认色！

<p [appHighlight]="color" defaultColor="violet">Highlight me too!
</p>

angular官网-指令相关推荐

Angular官网学习笔记
Angular官网学习笔记一.Angular概述 **什么是Angular:**一个基于TypeScript构建的开发平台包括: 一个基于组件的框架,用于构建可伸缩的Web应用一组完美集成的库,涵 ...
Angular官网教程示例知识点总结
Angular官网教程示例知识点总结 1.背景 2.知识点 2.1 应用的外壳 2.1.1 使用 Angular CLI 创建初始的应用结构 2.1.2 启动应用服务器 2.1.3 双花括号表达式 2 ...
解决 Angular 官网下载的库 Schematics 执行 npm run build 时遇到的编译错误
我在 Angular 官网下载的 library Schematics 例子,运行命令行 npm run build 时,遇到如下错误: npm run build my-lib@0.0.1 buil ...
解决 Angular 官网下载的库 Schematics 在 windows 环境不支持 .. 的临时解决方案
我在 Angular 官网下载的 library Schematics 例子,运行命令行 npm run build 时,遇到如下错误: my-lib@0.0.1 build c:\Code\SPA\ ...
解决 Angular 官网下载的 library Schematics build 出错的办法
从 angular 官网下载 Schematics 的例子,在工作区的根目录下,运行库的 ng build 命令. ng build my-lib 错误消息: An unhandled excepti ...
为什么按照 Angular 官网教程执行简单的测试代码，会遇到expect is not defined的错误消息
Angular 官网的代码: https://angular.io/api/core/Injectable#providedin 我把这段代码原封不动地拷贝到我的 app.module.ts ,然后执 ...
AngularJS/Angular官网
AngularJS官网:https://angularjs.org/ AngularJS中文官网:http://www.angularjs.net.cn/ Angular官网:https://angu ...
angular官网地址
angular2 中文镜像网站:https://angular.cn/ angular1 官网网站:https://angularjs.org/ angular2 官方网站:https://angul ...
Angular官网学习4：Angular入门，你的第一个应用（4）输出
在本节中,将设置商品提醒组件,当用户点击'Notify Me'的时候,像商品列表组件发出事件. 1.打开 product-alerts.component.ts, 从 @angular/core 中导 ...

angular官网-指令

angular官网-指令相关推荐

最新文章

热门文章