angular模板语法注意事项

模板引用变量也能够用 ref- 前缀代替 #。 下面的例子中就用把 fax 变量声明成了 ref-fax 而不是 #fax。

<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>

Angular 的安全导航操做符 (?.) 是一种流畅而便利的方式，用来保护出如今属性路径中 null 和 undefined 值。 下例中，当 currentHero 为空时，保护视图渲染器，让它免于失败。

The current hero's name is {{currentHero?.name}}

在 TypeScript 2.0 中，你可使用 --strictNullChecks 标志强制开启严格空值检查。angular不会默认开启

<div *ngIf="hero">
  The hero's name is {{hero!.name}}
</div>

在 Angular 编译器把你的模板转换成 TypeScript 代码时，这个操做符会防止 TypeScript 报告 "hero.name 可能为 null 或 undefined"的错误。

有时候，绑定表达式可能会报类型错误，而且它不能或很难指定类型。要消除这种报错，你可使用 $any 转换函数来把表达式转换成 any 类型。

<div>
  The hero's marker is {{$any(hero).marker}}
</div>

在这个例子中，当 Angular 编译器把模板转换成 TypeScript 代码时，$any 表达式能够防止 TypeScript 编译器报错说 marker 不是 Hero 接口的成员。

$any 转换函数能够和 this 联合使用，以便访问组件中未声明过的成员。

<div>
  Undeclared members is {{$any(this).member}}
</div>

$any 转换函数能够在绑定表达式中任何能够进行方法调用的地方使用。