góc 2 việc tổ chức của một phần tử trong góc 2 để sử dụng trong thiết kế Vật liệu Lite

Question

Tôi muốn sử dụng Material Design Lite snackbar trong góc 2.

Tôi cố gắng để có được giữ của Element trong mẫu của tôi như sau:

mẫu của tôi

<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> 

Trong tập tin thành phần của tôi

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); 
    } 

Tôi nhận được thông báo lỗi folowing. Làm thế nào để có được giữ của các phần tử với id toast_error

EXCEPTION: TypeError: Cannot read property 'MaterialSnackbar' of null in [null] 

PS: Tôi đã kiểm tra rằng this.el.nativeElement không cho tôi tham khảo đúng

Sửa

Tiếp theo câu trả lời và ý kiến, bây giờ tôi có thể nhận được giữ nguyên tố bằng cách sử dụng cùng một mã bên trong ngAfterViewInit. Tuy nhiên, tôi không thể lấy snackbar để làm việc. Sau đây là mã được cập nhật.

Trong tập tin thành phần của tôi

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); 
     } 

Lệnh console.log() in không xác định. Tôi đã đảm bảo rằng tệp material.min.js được tải và kiểm tra tệp, nó bao gồm MaterialSnackbar. Làm thế nào tôi nên gỡ lỗi này?

Answer 1

tôi giải quyết vấn đề bằng cách đặt các mã trong ngAfterViewInit() và cũng gọi upgradeElement như sau:

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

Nếu bạn cần truy cập trực tiếp đến phần tử DOM sau đó có ElementRef tiêm:

constructor(ref: ElementRef) ... 

Và sau đó truy cập vào phần tử DOM sử dụng:

ref.nativeElement 

Xem here để biết thêm thông tin.

Sau đó thay vì OnInit, hãy thử với AfterViewInit, để đảm bảo DOM được khởi tạo trước khi chạy truy vấn DOM -> xem here.

Answer 3

Bạn có thể sử dụng các biến mẫu và @ViewChild để có được giữ của một yếu tố cụ thể:

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



@ViewChile('toastError') toastErrorDiv; 

ngAfterViewInit() { 
    toastErrorDiv.doSomething(); 
}