Angular 2 rc 5
, ng-Material 2 alpha 7
以 Typescript 1.9
编码
要获取模板中元素的句柄,我使用 @ViewChild()
. 不幸的是,当元素位于Angular Material选项卡中时,ViewChild不起作用 .
Template
<!-- MdTab blocks access to ViewChild -->
<md-tab-group>
<md-tab>
<template md-tab-label>Tab Label</template>
<template md-tab-content>
<md-card>
<div #myDiv>I cannot get a reference to this div</div>
</md-card>
</template>
</md-tab>
</md-tab-group>
<!-- No MdTab, so ViewChild will work -->
<section>
<div #myDiv2>I get a reference to this div</div>
</section>
Component
@ViewChild('myDiv') myDiv;
@ViewChild('myDiv2') myDiv2;
ngAfterViewInit(){
console.log('myDiv: ',this.myDiv);
console.log('myDiv2: ',this.myDiv2);
}
Console log
myDiv:undefined myDiv2:Object {nativeElement:div}
Plunker:http://plnkr.co/edit/OM7xsIvVYMkX6OwrXQZ4?p=preview
几个月前我报告了这个问题,但与此同时它破坏了我的申请 . 关于如何解决这个问题的任何想法?
2 回答
我有一个功能解决方法:
我创建了一个带有
(instance)
事件的属性指令,该事件将发出托管该指令的元素 .现在要获取父组件中元素的引用,我更改了OP中的模板:
相反,我使用我的新指令,在发出主机元素时捕获它的实例并将其分配给类属性:
一旦
(instance)
事件在指令中触发,myDiv
属性将保存div的ElementRef的实例 . 现在控制台输出如果我记录myDiv
和myDiv2
:Plunker:http://plnkr.co/edit/RBlxCSgnPtkD4Nv2JLnw?p=preview
我不确定你项目的细节,但是你必须使用模板吗?我删除了md-card周围的模板标签,可以在Plunkr的控制台中看到对div1的引用 .