Angular 使用ngNonBindable跳脫插值符綁定效果 escape interpolation

在Angular的template如果要跳脫插值符（Interpolation {{...}}）的綁定效果，在所屬元素加上ngNonBindable即可。

例如today = new Date()是定義在componet的屬性。

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'demo';
  today = new Date(); // <--
}

在template分別使用ngNonBindable跳脫插值符的綁定效果。

app.component.html

<p>{{ today }}</p>
<p ngNonBindable>{{ today }}</p>

顯示效果如下：

此屬性可以作用，但目前(2020/01/01)仍未加入Angular文件中，請見[WIP]docs: add documentation for ngNonBindable #28577。

參考：

• Angular 使用插值符號(interpolation)來顯示Component的屬性資料
• Angular 使用DatePipe格式化日期 format Date with DatePipe
• Angular 使用routeLink切換頁面
• Angular 使用*ngFor來顯示陣列內容