angular2,读取什么:ViewChild中使用的属性?
我理解并经常使用@ViewChild,但是{read}道具的用途是什么 如:@ViewChild('puttufghere',{read:ViewContainerRef})puttufghere 见下面的代码:angular2,读取什么:ViewChild中使用的属性?,angular,Angular,我理解并经常使用@ViewChild,但是{read}道具的用途是什么 如:@ViewChild('puttufghere',{read:ViewContainerRef})puttufghere 见下面的代码: import {Component, ViewChild, ViewContainerRef, ComponentResolver} from '@angular/core'; @Component({ selector: 'my-component', template `
import {Component, ViewChild, ViewContainerRef, ComponentResolver} from '@angular/core';
@Component({
selector: 'my-component',
template `<h1>my-component</h1>`
})
class MyComponent{}
@Component({
selector: 'my-app',
template: `
<h2>Above</h2>
<div #putStuffHere></div>
<h2>Below</h2>
`
})
export class AppComponent {
@ViewChild('putStuffHere', {read: ViewContainerRef}) putStuffHere;
constructor(
public view:ViewContainerRef,
public compResolver:ComponentResolver
){}
ngAfterViewInit(){
this.compResolver.resolveComponent(MyComponent)
.then(factory => {
this.putStuffHere.createComponent(factory);
})
}
}
从'@angular/core'导入{Component,ViewChild,ViewContainerRef,ComponentResolver};
@组成部分({
选择器:“我的组件”,
模板“我的组件”`
})
类MyComponent{}
@组成部分({
选择器:“我的应用程序”,
模板:`
在上面
在下面
`
})
导出类AppComponent{
@ViewChild('puttufghere',{read:ViewContainerRef})puttufghere;
建造师(
公共视图:ViewContainerRef,
公共压缩程序:组件分解程序
){}
ngAfterViewInit(){
此.compressolver.resolve组件(MyComponent)
。然后(工厂=>{
this.puttufhere.createComponent(工厂);
})
}
}
问候
Sean它允许访问
ViewContainerRef
实例,而不是ElementRef
实例
以下是一个示例:
@ViewChild('putStuffHere') putStuffHere1:ElementRef;
@ViewChild('putStuffHere', {read: ViewContainerRef}) putStuffHere2:ElementRef;