Angular-裝飾器-@ContentChild

回憶下，咱們在用jq操做一個異步操做，獲取內容後填充或者改變某個區域，實現局部刷新，這個也差很少的功能定義，在消費的時候用內容填充或者叫替換有ng-content標註的地方，重點是「替換」,而@ViewChild是獲取,相似jq的$(node).append(el)
source code:

export interface ContentChildDecorator {
    (selector: Type<any> | Function | string, opts?: {
        read?: any;
    }): any;
    new (selector: Type<any> | Function | string, opts?: {
        read?: any;
    }): ContentChild;
}

在調用NgAfterViewInit回調函數以前就會設置這些視圖查詢。
元數據屬性：
【selector】- 用於查詢的指令類型或名字。
【read】- 從查詢到的元素中讀取另外一個令牌。
【static】-是否在運行更改檢測以前解析查詢結果（即僅返回靜態結果）。若是不提供此選項，編譯器將返回其默認行爲，即便用查詢結果來肯定查詢解析的時間。若是任何查詢結果位於嵌套視圖（例如*ngif）中，則將在運行更改檢測以後解析該查詢。不然，將在運行更改檢測以前解決此問題。

用法一：(selector:string)支持CSS選擇器(和jq的選擇器同樣)（html標籤,css-class,屬性[index=1]）匹配內容來替換ng-content

組件：

@Component({
  selector: 'app-demo-contentchild',
  template: `
    <div>
       @ContentChild指令的各類用法
    </div>
    <div>當selector爲html標籤元素的時候：</div>
    <ng-content select="button"></ng-content>
    <div>當selector爲css class的時候：</div>
    <ng-content select=".seletNode"></ng-content>
    <div>當selector爲自定義component的時候：</div>
    <ng-content select="app-angular-othercomponent"></ng-content>
  `,
  styleUrls: ['./angular-contentchild-child.component.scss']
})

在某個組件中使用：

<app-demo-contentchild>
  <button nz-button nzType="primary" [nzSize]="'small'" id="btnInterval" nzGhost>自定義控制顯示template</button>
  <div class="seletNode">你咬我啊啊，來呀來</div>
  <app-angular-othercomponent></app-angular-othercomponent>
</app-demo-contentchild>

加載結果：