Angular2中ViewChild与ContentChild的区别

来源:  2018-04-11 11:24:42    评论:0点击:

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);//输出MyCom对象
        console.log(this.myComB);//输出MyCom对象
        console.log(this.myComA == this.myComB);//true
    }
}
 
好了,估计你已经知道基本的使用方式了
@ViewChild(MyCom) 可以获取到页面中的MyCom类型的组件
@ViewChild('myCom') 可以获取到被标记为#myCom的组件
ContentChild
点击这里查看官方解释
官方文档翻译
查询一个内容。
内容查询结果将在ngAfterContentInit()回调前完成
不是我偷懒没翻译全,官方就这两句话。这尼玛是甲骨文啊?什么叫查询一个内容?
好在凭借我多年的学习和吹牛逼经验,在stackoverflow同志网站上找到了相关问题和解答
理解ContentChild
补充ViewChildren

@ViewChildren跟@ViewChild实际上没什么区别,从名字上很容易理解,一个获取一堆子元素,一个获取一个子
元素。
@ViewChild(MyCom) 返回的是一个MyCom变量
@ViewChildren(MyCom) 返回的是一个QueryList<MyCom>
为什么突然蹦出个ViewChildren?因为下面老外使用它来解释的
老外的解释
stackoverflow上某老外这样解释
The difference between @ViewChildren and @ContentChildren is that @ViewChildren look for elements in Sh
adow DOM while @ContentChildren look for them in Light DOM.
我在用中文翻译下哈
@ViewChildren和@ContentChildren之间的区别在于,@ViewChildren用于Shadow DOM,而@ContentC

hildren用于Light DOM
卧槽,Shadow DOM是什么?Light DOM又是什么? 这里有准确的答案
不完全解答
咦?如果你的基础较好的话,把ContentChildren这个两个单词分开,content-children好像似曾相识的感觉。
想起没?ng-content!
笔者理解: ContentChild用来获取<ng-content></ng-content>中的元素
我们写个伪代码实践下:
import {Component, ViewChild, 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/>
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权