Cách lấy Angular2 để liên kết thành phần trong innerHTML

Question

Tôi muốn tạo thành phần myApp sẽ nhúng HTML từ thuộc tính trên bộ điều khiển trong mẫu của nó. Tuy nhiên, một số HTML đó có thể bao gồm các bộ chọn thành phần khác.

import {InfoComponent} from ... 
@Component({ 
    selector: 'myApp', 
    template: `<div [innerHTML]='hData'></div> 
       <myInfo></myInfo>`, 
    directives: [InfoComponent] 
}) 
export class AppComponent { 
    hData = "<myInfo></myInfo>"; 
} 

@Component({ 
    selector: 'myInfo', 
    template: "<b>This is a test</b>" 
}) 
export class InfoComponent { 
} 

Trong ví dụ này, tôi hy vọng sẽ thấy This is a test hiển thị hai lần. Tuy nhiên, nó không xuất hiện mà động cơ Angular2 chọn lên trên thực tế là bộ chọn của các thành phần đã được tiêm để mẫu không bao giờ được tạo ra cho bộ chọn <myInfo></myInfo> được thêm thông qua các ràng buộc.

Bạn có thể thấy demo here.

Có cách nào để Angular2 phân tích cú pháp bộ chọn theo cách tương tự với bộ chọn được thêm rõ ràng trong mẫu không?

Answer 1

Không có cách nào để làm cho [innerHtml]="..." khởi tạo thành phần hoặc chỉ thị góc hoặc thiết lập bất kỳ ràng buộc nào.

Yêu cầu này gần nhất là DynamicComponentLoader. (DynamicComponentLoader đã được gỡ bỏ một thời gian trước) ViewContainerRef.createComponent()

Xem Angular 2 dynamic tabs with user-click chosen components cho một ví dụ

Kể từ RC.5 Angular2 sanitizes phong cách và HTML bổ sung thông qua ràng buộc. Xem In RC.1 some styles can't be added using binding syntax để biết thêm chi tiết.