angular 模板

angular 模板就是 html。

angular 的官方文档中说

为了消除脚本注入攻击的风险，Angular不支持模板中使用<script>标记，并向浏览器输出一条警告。

然而笔者在开发中添加了也可以正常使用，但是可能和angular的版本有关。

插值

<span>current customer:{{currentCustomer}}</span>

angular 会对所有 {{}} 中的内容进行求值，把求值的结果转换成字符串，并把它们跟相邻的字符串连起来，最后将这个组合出来的插值结果赋给元素或者指令属性。因此有如下示例：

<div><img src="{{urlbase}}/{{imagebase}}.{{slectedformat}}">

插值是一种特殊的语法，angular 会将其转换成为属性绑定。

表达式上下文

<ul>
    <li *ngFor="let customer of customers">{{customer.name}}</li>
</ul>

<label>
    <input #customerInput>{{customerInput.value}}
</label>

表达式的上下文变量是由模板变量、指令的上下文变量和组件的成员叠加而成的。变量的优先级是以命名空间的远近决定的。局域（模板）高于全局（组件）。

管道

管道是进行显示数据进行转换和格式化的angular类型。

其用法如下：

<p>The hero's birthday is {{birthday | date}}</p>

该组件的birthday通过管道操作符 | 流向 date 函数，实现格式化显示。

可以对管道进行串联。

The chained hero's birthday is {{birthday | date | uppercase }}

自定义管道

使用 @Pipe装饰器，管道类名使用大骆驼命名。

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

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

通过 transform 函数实现转换。

默认情况下，管道会定义为纯的(pure)，这样 angualar 只会在监测到 纯变更 时才会执行管道。
纯变更是对原始输入值的变更，或者是对对象引用数量的变更。使用纯管道，angular 会忽略复合对象中的变化，比如向现有数组中新增元素之类的。

定义非纯管道

@Pipe({
    name:testImpure,
    pure:false
})

非纯管道由于监测较多，比较消耗资源。

AsyncPipe 可以用于将一个 Observable 对象作为输入，并订阅。
angular 官方文档中说，若不使用这个管道，那么组件代码就必须订阅这个可观察对象来使用它的值，提取已解析的值、把它们公开进行绑定，并在销毁这段可观察对象时取消订阅，以防止内存泄漏。

import { Component } from '@angular/core';
import { Observable,interval } from 'rxjs';
import { map,take } from 'rxjs/operators';

@Component({
    selector:'app-hero-message',
    template:`
        <h2>Async Hero Message And AsyncPipe</h2>
        <p>Message:{{message| async }}</p>
    `
})
export class HeroAsyncMessageComponent{
    message:Observable<string>;

    private message = [
        "You are my hero!",
        "You are the best hero."
    ];

    constructor(){
        this.resend();
    }

    resend(){
        this.message$ = interval(500).pipe(
            map(i=>this.messages[i],
            take(this.message.length))
        );
    }
}

每当组件运行变更检测的时候就会调用非纯管道，在 CheckAlways 策略下每隔几毫秒就运行一次，为避免出现性能问题，在http访问时，使用管道缓存服务器的响应。

数据绑定

绑定类型	语法	分类
插值，属性，css类样式	{{expression}} [target]="expresseion" bind-target="expression"	单向 数据源->视图
事件	(target)="statement" on-target="statement"	单向 视图 -> 数据源
双向	[(target)]="expression" bindon-target="expression"	双向 视图 <-> 数据源

tip:

<div [class.special]="isSpecial">isSpecial</div>
<button [style.color]="isSpecial?'red':'green'">

svg

在 angular 中可以将 svg 作为有效模板

<svg>
  <g>
    <rect x="0" y="0" width="100" height="100" [attr.fill]="fillColor" (click)="changeColor()" />
    <text x="120" y="50">click the rectangle to change the fill color</text>
  </g>
</svg>

import { Component } from '@angular/core';

@Component({
  selector: 'app-svg',
  templateUrl: './svg.component.svg',
  styleUrls: ['./svg.component.css']
})
export class SvgComponent {
  fillColor = 'rgb(255, 0, 0)';

  changeColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    this.fillColor = `rgb({r},{g}, ${b})`;
  }
}