angular 鲜为人知的模版功能

ngProjectAs

Angular 内容投影 <ng-content></ng-content> 你放在组件标签中的所有东西都会被投影到那里——你也可以添加多个带有“select”属性的内容标签来进行目标投影。 也可以与ng-container一起使用。

layout.component.ts

1
2
3
4
5
6
<ng-content select="top"></ng-content>
  <main>
    <ng-content select="aside"></ng-content>
    <ng-content></ng-content>
  </main>
<ng-content select="footer"></ng-content>

layout.component.css :host 作用于<layout>标签

1
2
3
4
5
6
7
8
9
10
:host {
  height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  flex: 1;
}

1
2
3
4
5
6
7
8
9
<layout>
  <ng-container ngProjectAs="top">
    <header>Header</header>
    <nav>Navigation</nav>
  </ng-container>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
  I am content
</layout>

ngNonBindable

它告诉 Angular 编译器将模板的一部分视为纯 html：

1
<div ngNonBindable>Hello, {{userName}}</div>

ngPreserveWhitespaces

Angular 会在在编译期间删除空白符号。 使用ngPreserveWhitespaces ，编译器就会保持所有空白不变。 也可以使用&ngsp;

$any()

有时，绑定表达式会在 AOT 编译期间触发类型错误，并且不可能或很难完全指定类型。要使此错误静音，可以使用$any()强制转换函数把表达式强制转换为any类型

1
<p>The item's undeclared best by date is: {{$any(item).bestByDate}}</p>

使用 $any() 可以防止 TypeScript 报告 bestByDate 不是 item 对象成员的错误。