我想在Angular 2中使用
Material Design Lite snackbar.
我试图在我的模板中抓住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.',actionText: 'Undo'
};
console.log(snackbarContainer.MaterialSnackbar); //prints undefined
//snackbarContainer.MaterialSnackbar.showSnackbar(data);
}
console.log()命令打印undefined.我确保加载了material.min.js并检查了文件,它确实包含了MaterialSnackbar.我该怎么调试呢？
解决方法
我通过将代码放在ngAfterViewInit()中并同时调用upgradeElement来解决问题,如下所示：
constructor(private el:ElementRef){}
ngAfterViewInit(){
window.componentHandler.upgradeAllRegistered();
var snackbarContainer = this.el.nativeElement.querySelector("#toast_error")
var data = {
message: 'Button color changed.',actionText: 'Undo'
};
snackbarContainer.MaterialSnackbar.showSnackbar(data);
}
