【问题标题】：angular 2 getting hold of an element in Angular 2 for use in Material design liteangular 2 获取 Angular 2 中的一个元素以用于 Material design lite
【发布时间】：2016-02-24 06:44:00
【问题描述】：

我想在 Angular 2 中使用 Material Design Lite snackbar。

我试图在我的模板中获取元素，如下所示：

我的模板

 <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 确实给了我正确的参考

编辑

根据答案和 cmets，我现在可以通过在 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。我应该如何调试这个？

【问题讨论】：

标签： angular material-design-lite

【解决方案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);
                    }

【讨论】：

【解决方案2】：

如果您需要直接访问 DOM 元素，请注入 ElementRef：

constructor(ref: ElementRef) ...

然后使用以下命令访问 DOM 元素：

ref.nativeElement

更多信息请参见here。

然后尝试使用AfterViewInit，而不是OnInit，以确保在运行DOM 查询之前初始化DOM -> 请参阅here。

【讨论】：

那么，我得到了根元素吗？我该怎么做才能获得子元素（最好通过 id）
如果你再用它来查询，是否有效？问题是查询是在 DOM 准备好之前进行的。尝试使用 AfterViewInit，检查更新的答案
我更新了我的问题。它可以工作，但我无法让小吃店工作。

【解决方案3】：

您可以使用模板变量和@ViewChild 来获取特定元素：

<div id="toast_error" #toastError> Error message </div>



@ViewChile('toastError') toastErrorDiv;

ngAfterViewInit() {
  toastErrorDiv.doSomething();
}

【讨论】：