Question

Angular 2 rc 5，ng-Material 2 alpha 7使用Typescript 1.9编码

要获取模板中元素的句柄，我使用@ViewChild()。不幸的是，当元素在Angular Material选项卡中时，ViewChild不起作用。

模板

<!-- 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>

组件

@ViewChild('myDiv') myDiv;
@ViewChild('myDiv2') myDiv2;

ngAfterViewInit(){
    console.log('myDiv: ',this.myDiv);
    console.log('myDiv2: ',this.myDiv2);
}

控制台日志

myDiv：undefined

myDiv2：Object {nativeElement：div}

Plunker：http://plnkr.co/edit/OM7xsIvVYMkX6OwrXQZ4?p=preview

几个月前我报告了这个问题，但与此同时它破坏了我的申请。关于如何解决这个问题的任何想法？

Answer 1

我有一个功能解决方法：

我创建了一个带有(instance)事件的属性指令，该事件将发出托管该指令的元素。

@Directive({ selector: '[myElem]' })
export class ElementRefDirective implements OnInit {

    constructor(private el: ElementRef) {}

    @Output() instance = new EventEmitter<ElementRef>();

    /**emit a reference to the host element*/
    ngOnInit(){this.instance.emit(this.el);}
}

现在要获取父组件中元素的引用，我改变了OP中的模板：

<div #myDiv>...</div>

相反，我使用我的新指令，在发出主机元素时捕获它的实例并将其分配给类属性：

<div myElem (instance)="myDiv=$event">...</div>

一旦(instance)事件在指令中触发，myDiv属性将保存div的ElementRef的实例。如果我记录myDiv和myDiv2：

，现在是控制台输出

myDiv：Object {nativeElement：div}

myDiv2：Object {nativeElement：div}

Plunker：http://plnkr.co/edit/RBlxCSgnPtkD4Nv2JLnw?p=preview

Answer 2

我不确定您项目的详细信息，但是您是否必须使用模板？我删除了md-card周围的模板标签，可以在Plunkr的控制台中看到对div1的引用。

Angular 2 Material Tabs打破ViewChild。解决方法的想法？

2 个答案: