Angular 2 Material 选项卡中断 ViewChild。解决方法的想法？

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}

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

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

Answer 1

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

Answer 2

我有一个有效的解决方法：

我创建了一个带有 (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>

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

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

一旦 (instance) 事件在指令中触发，myDiv 属性将保存 div 的 ElementRef 的一个实例。现在控制台输出如果我记录 myDiv 和 myDiv2:

myDiv: Object { nativeElement: div }

myDiv2: Object { nativeElement: div }

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

Angular 2 Material 选项卡中断 ViewChild。解决方法的想法？

Angular 2 Material Tabs break ViewChild. Ideas for a workaround?

typescript

angular-material

angular