angular 2获取Angular 2中的元素以用于Material design lite

Question

我想在Angular 2中使用Material Design Lite快餐栏.

我试图在我的模板中抓住Element,如下所示:

我的模板

 <test>
     <div id="child1"> child1 <div id="child2">
      <div id="child2"> child2 <div id="child2">
       <div id="toast_error"> Error message </div>
      </div>
     </div>
    </div>
</test>

在我的组件文件中

constructor(private el:ElementRef){}

ngOnInit(){
        this.show_error("something");
    }
show_error(err){
        var snackbarContainer = this.el.nativeElement.querySelector("#toast_error")
        var data = {
            message: 'Button color changed.',
            timeout: 2000,
            actionText: 'Undo'
        };

        snackbarContainer.MaterialSnackbar.showSnackbar(data);
    }

我收到了以下错误消息.如何获取带有id的元素toast_error

EXCEPTION: TypeError: Cannot read property 'MaterialSnackbar' of null in [null]

PS:我已经检查this.el.nativeElement确实给了我正确的参考

编辑

根据答案和评论,我现在可以通过使用相同的代码来获取元素ngAfterViewInit.但是,我无法让小吃店工作.以下是更新的代码.

在我的组件文件中

   constructor(private el:ElementRef){}


    ngAfterViewInit(){
            var snackbarContainer = this.el.nativeElement.querySelector("#toast_error")
            var data = {
                message: 'Button color changed.',
                timeout: 2000,
                actionText: 'Undo'
            };

            console.log(snackbarContainer.MaterialSnackbar); //prints undefined
            //snackbarContainer.MaterialSnackbar.showSnackbar(data);
        }

该console.log()命令打印未定义.我确保加载了material.min.js并检查了文件,它确实包含了MaterialSnackbar.我该怎么调试呢？

Answer 1

我通过放置代码ngAfterViewInit()并调用upgradeElement以下代码解决了该问题：

constructor(private el:ElementRef){} 

ngAfterViewInit(){
    window.componentHandler.upgradeAllRegistered();
    var snackbarContainer =         this.el.nativeElement.querySelector("#toast_error")
                    var data = {
                        message: 'Button color changed.',
                        timeout: 2000,
                        actionText: 'Undo'
                    };                           
    snackbarContainer.MaterialSnackbar.showSnackbar(data);
                    }