首页 文章

Angular 2 Material Tabs打破ViewChild . 解决方法的想法?

提问于
浏览
0

Angular 2 rc 5ng-Material 2 alpha 7Typescript 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 回答

  • 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的实例 . 现在控制台输出如果我记录 myDivmyDiv2

    myDiv:Object {nativeElement:div} myDiv2:Object {nativeElement:div}

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

  • 0

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

相关问题