Góc 2 bên trongHTML (nhấp) ràng buộc

Question

Tôi đã có một menu html lớn mà tôi quyết định ràng buộc để có thể thực hiện một số menu thả xuống và tránh trùng lặp mã html. Cha mẹ> con (cũng là cha mẹ nữa)> con ...

Đối với ngữ cảnh: Trong ng2_msList/msList.components.ts, ColumnsManagements.ts được nhập dưới dạng this.ColumnsManagementInstance. Thực đơn innerHTML được hiển thị đúng cách, trong ng2_msList/trang/list.html:

<!-- COLUMNS DROPDOWN BUTTON --> 
<ul [innerHTML]="msList.ColumnsManagementInstance.columnMenu" class="dropdown-menu" role="menu"> </ul> 

Với (trong một phiên bản rất đơn giản của mã của tôi): (Nhờ vậy Stack Q)

setHtmlColumnsMenu() { 
    var self = this; 
    var htmlcolumnsmenu = ''; 
    [...] 
    htmlcolumnsmenu += this.createColumnsList(this.getNoneRelationalColumns(true)); 

    // which return something like a lot of html content and sometime in it : 
    // <a href="javascript:;" (click)="msList.ColumnsManagementInstance.toogleColumn(column)"> 
    [...] 
    return htmlcolumnsmenu; 
} 

NHƯNG (nhấp chuột) = "msList.ColumnsManagementInstance.toogleColumn (cột)" (trước đây trong nội dung html) không hoạt động nữa. Nó viết trong dạng xem dưới dạng văn bản đơn giản trong thẻ (trước khi innerHtml nó không được hiển thị).

Tôi không thể tiếp cận một cách để hoạt động trở lại. Tôi thử nghiệm nhiều cách để gọi hàm hoặc như tôi đã tìm thấy trong các liên kết web như trên ví dụ Ang Doc Section, here. Những ví dụ này gọi một hàm được đặt trong cùng một tệp/ngữ cảnh rất dễ dàng (nhấp) = "MyAction()" nhưng với ngữ cảnh của tôi, tôi không thể gọi nó đúng cách.

Kiến trúc ứng dụng có thể không phải là cuộc gọi nhấp Angular2 mong đợi.

Answer 1

Đó là theo thiết kế. Angular không xử lý HTML được thêm vào bởi [innerHTML]="..." (ngoại trừ khử trùng) theo bất kỳ cách nào. Nó chỉ chuyển nó đến trình duyệt và đó là nó.

Nếu bạn muốn thêm HTML động có chứa các ràng buộc bạn cần phải quấn nó trong một thành phần Angular2, sau đó bạn có thể thêm nó sử dụng ví dụ ViewContainerRef.createComponent()

Đối với một ví dụ đầy đủ thấy Angular 2 dynamic tabs with user-click chosen components

Một ít Angulary cách để tiêm ElementRef, truy cập vào HTML được thêm bằng cách sử dụng

elementRef.nativeElement.querySelector('a').addEventListener(...) 

Answer 2

Có thể đã quá muộn nhưng hãy để tôi hy vọng rằng sẽ giúp ai đó.

Vì bạn muốn nhấp vào liên kết (và có lẽ ràng buộc khác) nó sẽ là tốt hơn để skip sử dụng [innerHTML]="..." và tạo ra một thành phần bên trong mà bạn vượt qua các dữ liệu thông qua @Input() chú thích.

Cụ thể, hình ảnh bạn có một thành phần được gọi BaseComponent nơi bạn thiết lập một số mã HTML để một biến htmlData:

let htmlData = '...<button (click)="yourMethodThatWontBeCalled()">Action</button>...' 

Sau đó, trong tập tin html BaseComponent 's bạn bind nó như dưới đây:

...<div [innerHTML]="htmlData"></div>... 

Thay vì làm việc này, bạn tạo InnerComponent.ts:

@Component({ 
selector: 'inner-component', 
templateUrl: './inner-component.html', 
styleUrls: ['./inner-component.scss'] 
}) 
export class InnerComponent { 
    @Input() 
    inputData: any; 

    methodThatWillBeCalled(){ 
    //do you logic on this.inputData 
    } 
} 

'tập tin s Html:

...<button (click)="methodThatWillBeCalled()">Action</button>... 

Bây giờ trong BaseComponent' InnerComponent Html tập tin s:

...<inner-component [inputData]="PUT_HERE_YOUR_DATA"></inner-component>