Angular2中ViewChild与ContentChild的区别

ViewChild

官方文档翻译

先来看看官方解释

• 声明一个对子元素的引用。
• ViewChild需要一个参数来选择元素。
• 如果参数是一个类型，一个指令或一个类型的组件将被绑定。
• 如果参数是一个字符串，字符串被解释为一个选择器。也就是一个元素包含模板变量（如 #child）。
• 在任何情况下，如果找到多个元素，那么只返回第一个。
• 这个子元素将在ngAfterViewInit()回调前被赋值。

笔者英语已经还给体育老师，各位看官将就着，自己理解一下。

不理解吗？

不理解吗？好吧，怪我，我用最通俗的东北话大概讲解下。

• ViewChild就是选择元素用的。
• 你不告诉它选择什么元素，它肯定不知道啊！所以你得给一个类型。
• ViewChild这个兄弟还算讲究，你不告诉它类型可以，那就给他一个模板变量名。(下面会解释)
• 如果这位仁兄找到了好多元素，那么它只会返回第一个找到的元素。
• ViewChild会在ngAfterViewInit()回调函数之前做完工作，也就是说你不能在构造函数中使用这个元素。

更通俗一些

下面我将用程序员最直接的方式，帮助大家理解:

import {Component,ViewChild,AfterViewInit} from '@angular/core';

@Component({
    SELEctor: 'my-com',template: '<button>我是一个按钮</button>'
})
export class MyCom{
}

@Component({
    template: '<my-com #myCom></my-com>'
    directives: [MyCom]
})
export class MyPage implements AfterViewInit{
    @ViewChild(MyCom) myComA;
    @ViewChild('myCom') myComB; 

    public constructor(){
        console.log(this.myComA);//undefined
        console.log(this.myComB);//undefined
    }

    public ngAfterViewInit(){
        console.log(this.myComA);//@L_437_16@myCom对象
        console.log(this.myComB);//@L_437_16@myCom对象
        console.log(this.myComA == this.myComB);//true
    }
}

好了，估计你已经知道基本的使用方式了

• @ViewChild(MyCom) 可以获取到页面中的MyCom类型的组件
• @ViewChild('myCom') 可以获取到被标记为#myCom的组件

ContentChild

点击这里查看官方解释

官方文档翻译

• 查询一个@L_674_25@。
• @L_674_25@查询结果将在ngAfterContenTinit()回调前完成

不是我偷懒没翻译全，官方就这两句话。这尼玛是甲骨文啊？什么叫查询一个@L_674_25@？

好在凭借我多年的学习和吹牛逼经验，在stackoverflow同志网站上找到了相关问题和解答

理解ContentChild

补充ViewChildren

@ViewChildren跟@ViewChild实际上没什么区别，从名字上很容易理解，一个获取一堆子元素，一个获取一个子元素。

• @ViewChild(MyCom) 返回的是一个@H_192_11@myCom变量
• @ViewChildren(MyCom) 返回的是一个QueryList<MyCom>

为什么突然蹦出个ViewChildren？因为下面老外使用它来解释的

老外的解释

stackoverflow上某老外这样解释

我在用中文翻译下哈

卧槽，Shadow DOM是什么？Light DOM又是什么? 这里有准确的答案

不完全解答

咦？如果你的基础较好的话，把ContentChildren这个两个单词分开，content-children好像似曾相识的感觉。想起没？ng-content！

我们写个伪代码实践下:

import {Component,ContentChilD} from '@angular/core';

/// 儿子组件
@Component({
    SELEctor: 'son-com',template: '<h1>im text</h1>',directives: [MyCom]
})
export class SonCom{
}

/// 爸爸组件
@Component({
    SELEctor: 'father-com',template: ' <son-com></son-com> <ng-content></ng-content> ',directives: [SonCom]
})
export class FatherCom implements AfterViewInit{
    @ViewChild(SonCom) viewCom;
    @ContentChild(SonCom) contentCom;

    public ngAfterViewInit(){
        console.log(this.viewCom);
        console.log(this.contentCom);
    }
}

最终输出:

<father-com>
    <h1>im text</h1>
    <h1>im text</h1>
</father-com>

然后我们调试后发现，this.viewCom等于第一行<h1/>，this.contentView等于第二行<h1/>

这也证实了我的理解。

完结

欢迎拍砖

参考文献

Switching to Angular 2