Cách thêm sự kiện nhấp chuột vào phần tử html được thêm động theo kiểu số

Question

Tôi đang tạo ứng dụng ở góc 2. Tôi muốn thêm sự kiện nhấp chuột vào phần tử html được thêm động. Tôi xác định một chuỗi (contentString), và trong chuỗi này tôi xác định phần tử html.

var contentString = '<b>' + this.mName + '</b><br/> ' + this.mObject.category + '<br/> Click here for more information <button (click)="navigate()">Navigate here</button>'; 

Chuỗi này được đặt bên trong một yếu tố html như thế này:

var boxText = document.createElement("div"); 
    boxText.innerHTML = contentString; 

Mặc dù khi tôi kiểm tra nguyên tố, nó có sự kiện click xác định, nhưng nó không kích hoạt.

trên nhấp vào nó nên an ủi đăng nhập

navigate() { 
console.log("eeeehnnananaa"); 
} 

Nhưng điều đó không làm việc. Bất kỳ ai là giải pháp?

Answer 1

Góc xử lý mẫu khi thành phần được biên dịch. HTML được thêm vào sau không được biên dịch nữa và các liên kết bị bỏ qua.

Bạn có thể sử dụng

constructor(private elRef:ElementRef) {} 

ngAfterViewInit() { 
    // assume dynamic HTML was added before 
    this.elRef.nativeElement.querySelector('button').addEventListener('click', this.onClick.bind(this)); 
}