угловой 2 добыть элемент в угловых 2 для использования в конструкции материалов облегченного

Question

Я хочу использовать Material Design Lite snackbar в Угловом 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); 
    } 

Получаю следующее сообщение об ошибке. Как я разжиться элемента с идентификатором 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); 
        } 

Answer 2

Если вам нужен прямой доступ к DOM элементу, то есть ElementRef впрыскивается:

constructor(ref: ElementRef) ... 

А затем получить доступ к элементу DOM с помощью:

ref.nativeElement 

См here для получения дополнительной информации.

Затем вместо OnInit попробуйте с AfterViewInit, чтобы убедиться, что DOM инициализирован перед запуском запроса DOM -> см. here.

Answer 3

Вы можете использовать переменные шаблона и @ViewChild разжиться определенного элемента:

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



@ViewChile('toastError') toastErrorDiv; 

ngAfterViewInit() { 
    toastErrorDiv.doSomething(); 
}