ViewChild与ContentChild的联系和区别

原文

　　https://www.jianshu.com/p/5ab619e576ea

大纲

　　1、认识ViewChild
　　2、认识ContentChild
　　3、ViewChild与ContentChild的联系和区别

认识ViewChild

/*
angular中文文档的说明
    You can use ViewChild to get the first element or the directive
    matching the selector from the view DOM. If the view DOM changes,
    and a new child matches the selector, the property will be updated.

    View queries are set before the ngAfterViewInit callback is called.

    Metadata Properties:
        1、selector - the directive type or the name used for querying.
        2、read - read a different token from the queried elements.

翻译：
    你可以使用ViewChild去获得从DOM视图中通过选择器匹配到的第一个元素或者指令。
    如果这个DOM视图发生变化，那么对应匹配到的ViewChild也会跟着更新。(更新未实现)
    视图的获取是在ngAfterViewInit的时候
    元数据匹配：
        1、选择器：指令类型（包括组件）
        2、根据不同的token获取节点元素（token指模板变量，如#child）

通俗翻译：
    可以通过ViewChild这个装饰器获取视图元素中的内容，
    这个视图包括视图模板中的视图元素，也包括作为子组件放置在视图模板中的内容。
    ViewChild装饰器不可以在constructor的时候注入，
    因为ViewChild装饰器获取元素是在ngAfterViewInit回调前被调用，
    即在ngAfterViewInit中才实现
    ViewChild装饰器获取目标元素的方式有两种：
        1、一种是通过在模板元素中存在的子组件的组件名，如：ChildComponent
        2、一种是通过获取模板元素的模板变量如#child来指定获取
*/

认识ContentChild

/*
angular中文文档：
    You can use ContentChild to get the first element or the directive
     matching the selector from the content DOM. If the content DOM changes,
    and a new child matches the selector, the property will be updated.

    Content queries are set before the ngAfterContentInit callback is called.

    Metadata Properties:
        1、selector - the directive type or the name used for querying.
        2、read - read a different token from the queried element.

翻译：
    你可以使用ContentChild去获得从DOM视图中通过选择器匹配到的第一个元素或者指令。
    如果内容DOM发生变化，并且新的子项与选择器匹配，则属性将被更新。
    内容查询发生在ngAfterContentInit回调前，即contentChild的获取发生在生命周期
    ngAfterContentInit。

    元数据属性：
        1、选择器——用于查询的指令类型或名称。
        2、从查询元素读取不同的令牌。
*/

ViewChild与ContentChild的联系和区别

/*
    ViewChild和ContentChild其实都是从子组件中获取内容的装饰器

    它们本质的区别其实就只是在于方法调用的时机以及获取内容的地方：

        1、时机：
            ViewChild在ngAfterViewInit的回调中调用
            ContentChild在ngAfterContentInit的回调用调用

        2、获取内容的地方
            ViewChild从模板中获取内容
            ContentChild需要从ng-content中投影的内容中获取内容，
            也就是没有使用ng-content投影就无法获取内容
*/