我想使用 Material Design Lite snackbar在 Angular 2 中。
我试图在我的模板中获取元素,如下所示:
我的模板
<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
中使用相同的代码来获取元素。但是,我无法让 snackbar 工作。以下是更新后的代码。
在我的组件文件中
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
。我应该如何调试它?
最佳答案
我通过将代码放在 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);
}
关于angular 2 获取 Angular 2 中的元素以用于 Material design lite,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35595074/