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>

加载结果：