【Angular】模板语法

2021/09/09 09:42:35

Angular

绑定方式

[] 进行属性绑定，() 进行事件绑定

数据绑定绑定的是元素的 property
```
<input type="text" value="Sarah">
```
当用户在 <input> 中输入 Sally 时，DOM 元素的 value Property 将变为 Sally。但是，如果使用 input.getAttribute('value') 查看 HTML 的 Attribute value，则可以看到该 attribute 保持不变 —— 它返回了 Sarah。

绑定类型	绑定目标	语法	数据流向
Property	元素属性组件属性指令属性	`[ngClass]="{'special': isSpecial}"` `[target]="expression"` `bind-target="expression"`	单向绑定
原生事件	元素事件组件事件指令事件	`(target)="statement"` `on-target="statement"`	单向绑定
Attribute	元素 Attribute	`[attr.aria-label]="help"`	单向绑定
类	元素 class 属性	`[class.special]="isSpecial"`	单向绑定
样式	元素 style 属性	`[style.color]="isSpecial ? 'red' : 'green'"`	单向绑定
双向绑定	事件与属性	`[(target)]="expression"` `bindon-target="expression"` `[([ngModel]="name"`	双向绑定

自定义事件

父组件在子组件上绑定事件并用 $event 接收子组件传来的数据，子组件需要创建一个 EventEmitter 的实例来触发事件

父组件

<app-hero-detail (myClick)="clickChild($event)"></app-hero-detail>

export class parent {
  clickChild(data) {
    console.log(data);
  }
}

子组件

import { EventEmitter } from "@angular/core";
export class child {
  @Output() myClick = new EventEmitter();

  ngOnInit(): void {
    this.myClick.emit("here is child"); // 触发自定义事件
  }
}

双向数据绑定

与 Vue 类似，父组件给子组件传递一个值，子组件在值发生变化时通过自定义事件通知父组件修改

如果在组件上声明变量，该变量就会引用该组件实例。
如果在标准的 HTML 标记上声明变量，该变量就会引用该元素。
如果你在 <ng-template> 元素上声明变量，该变量就会引用一个 TemplateRef 实例来代表此模板。
如果该变量在右侧指定了一个名字，比如 #var="ngModel" ，那么该变量就会引用所在元素上具有这个 exportAs 名字的指令或组件。

模板引用变量

在模板中，要使用井号 # 来声明一个模板变量，可以在组件模板中的任何地方引用某个模板变量

Tips

模板绑定使用的是 Property 和事件,而不是 Attribute，在 Angular 中，HTML Attribute 的唯一作用是初始化元素和指令的状态。
当表达式解析为 null 时，Angular会完全删除该 Attribute。

管道

语法

<p>{{ name | UpperCasePipe }}</p>

管道传参

紧跟在管道名称（ currency ）后面的是冒号（:）和参数值（'EUR'）。

多参时用冒号分隔

<p>{{ price | currency:'EUR' }}</p>

串联管道

多个管道串联时从左往右执行

<p>{{ birthday | date | uppercase}}</p>

自定义管道

创建管道文件 exponential-strength.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "exponentialStrength" })
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent?: number): number {
    return Math.pow(value, isNaN(exponent) ? 1 : exponent);
  }
}

使用管道

<p>{{ 2 | exponentialStrength: 10 }}</p>

引用类型值

默认情况下管道会定义成纯的(pure)，这样 Angular 只有在检测到输入值发生了纯变更时才会执行该管道。纯变更是对原始输入值（比如 String、Number、Boolean 或 Symbol ）的变更，或是对对象引用的变更（比如 Date、Array、Function、Object）。

用新对象替换旧对象修改对象的引用来触发变更检测
使用非纯的管道

在装饰器中将 pure 属性设置为 false ，对象内的属性发生变化时就会触发管道执行

@Pipe({
  name: 'flyingHeroesImpure',
  pure: false
})

内置标签

`<ng-template>` 元素

如果没有使用结构型指令，而仅仅把一些别的元素包装进 <ng-template> 中，那些元素就是不可见的

`<ng-container>` 元素

相当于 Vue 的 <template>，本身不会被渲染，可以作为一组元素的根元素进行条件渲染

【Angular】模板语法

# 绑定方式

# 自定义事件

# 双向数据绑定

# 模板引用变量

# Tips

# 管道

# 语法

# 自定义管道

# 引用类型值

# 内置标签

# <ng-template> 元素

# <ng-container> 元素