Làm thế nào để làm cho góc 2 nhặt động thêm chỉ thị routerLink

Question

Như đã thấy trong this plunker, tôi tự động thêm một HTML để một trong những yếu tố của tôi, mà nắm này:

@Component({ 
    selector: 'my-comp', 
    template: `<span [innerHTML]="link"></span>`, 
}) export class MyComponent { 
    private linkContent = '<a routerLink="/my-route">GoTo Route</a>'; 
    private link; 

    constructor(sanitizer: DomSanitizer) { 
     this.link = sanitizer.bypassSecurityTrustHtml(linkContent); 
    } 
} 

Điều này dẫn đến <a routerLink="/my-route">GoTo Route</a> là được thêm vào DOM, nhưng Angular không biết gì về chỉ thị routerLink trên phần tử này và không "ràng buộc" với nó. Vì vậy, khi bạn nhấp vào liên kết, nó kết quả trong tải lại hoàn chỉnh với re-bootstrap (mà không làm việc trong plunk, nó chỉ cung cấp cho một 404).

Câu hỏi: cách nói góc nhìn qua DOM (hoặc phần của nó hoặc thậm chí là một phần tử) và thực hiện khởi tạo thành phần nếu cần?

Answer 1

Angular2 không xử lý HTML được thêm động theo bất kỳ cách nào ngoại trừ khử trùng.

Chuyển '<a routerLink="/my-route">GoTo Route</a>' đến innerHTML đang thực hiện chính xác việc này, chuyển chuỗi này tới DOM, nhưng không có gì khác. Không có chỉ thị routerLink nào được khởi tạo hoặc được áp dụng.

Nếu bạn cần thêm HTML động có sử dụng Angular2 bindings, chỉ thị, hoặc các thành phần, bạn có thể thêm HTML để một thành phần mẫu, và thêm thành phần này tự động sử dụng ViewContainerRef.createComponent() như chứng minh ví dụ như trong Angular 2 dynamic tabs with user-click chosen components