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使用相同的代碼來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);
                    }

Answer 2

如果您需要直接訪問DOM元素， ElementRef注入ElementRef ：

constructor(ref: ElementRef) ...

然后使用以下命令訪問DOM元素：

ref.nativeElement

有關更多信息，請參見此處 。

然后，使用AfterViewInit代替OnInit ，以確保在運行DOM查詢之前初始化DOM->參見此處 。

Answer 3

您可以使用模板變量和@ViewChild來獲取特定元素：

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



@ViewChile('toastError') toastErrorDiv;

ngAfterViewInit() {
  toastErrorDiv.doSomething();
}