Cách hiển thị mẫu động có các thành phần trong Angular2

Question

Tôi đã thử nhiều tùy chọn ngăn xếp luồng như Load existing components dynamically Angular 2 Final Release.

Điều tôi muốn làm là tải trang html có yêu cầu ajax và hiển thị/biên dịch mẫu này trong thành phần tùy chỉnh của tôi.

Tôi đã tìm ra rằng angular2 có hai thành phần không được dùng nữa và tôi phải sử dụng ComponentFactoryResolver.

Trong giải pháp cũ của tôi, tôi chỉ có thể đặt '[innerHtml]' để hiển thị HTML. Bây giờ tôi cần một giải pháp mới.

Ai có thể giúp tôi?

page.component.ts

import { Component, ViewChild, ViewContainerRef, ComponentFactory, OnInit, ComponentFactoryResolver } from '@angular/core'; 
import { ActivatedRoute, Params } from '@angular/router'; 


@Component({ 
    selector: "wd-page", 
    templateUrl: "/app/page/page.component.html", 
    providers: [] 
}) 
export class PageComponent implements OnInit { 

    // we need the viewcontainer ref, so explicitly define that, or we'll get back 
    // an element ref. 
    @ViewChild('dynamicChild', { read: ViewContainerRef }) 
    private target: ViewContainerRef; 

    private page = { 
     Source: "<div><h2>Hello world</h2><one-of-my-components></one-of-my-components></div>" 
    } 


    constructor(
     private vcRef: ViewContainerRef, 
     private resolver: ComponentFactoryResolver) { } 


     ngOnInit() { 
      //What code do i need here? 
     } 
} 

<div #dynamicChild></div> 

<!-- Old implementation! 

    <div *ngIf="!showSource" [innerHTML]="page"> 
    </div> 
--> 

Answer 1

Vấn đề giải quyết Nhờ Yurzui,

https://plnkr.co/edit/TAbupH4si62x10QZ7xuc?p=preview

Các generic HTML outlete từ một bài khác nhau (Angular 2.1.0 create child component on the fly, dynamically) có thể được sử dụng để hiển thị các mẫu với dire tùy chỉnh ctives trong đó.

Đừng quên nhập mô-đun với tất cả các thành phần tùy chỉnh mà bạn muốn kết xuất!

export function createComponentFactory(compiler: Compiler, metadata: Component): Promise<ComponentFactory<any>> { 
const cmpClass = class DynamicComponent {}; 
const decoratedCmp = Component(metadata)(cmpClass); 

// Import the module with required components here 
@NgModule({ imports: [CommonModule, RouterModule, SharedModule], declarations: [decoratedCmp] }) 
class DynamicHtmlModule { } 

return compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule) 
    .then((moduleWithComponentFactory: ModuleWithComponentFactories<any>) => { 
    return moduleWithComponentFactory.componentFactories.find(x => x.componentType === decoratedCmp); 
    }); 
} 

Answer 2

tôi đã thay đổi nhỏ cho việc sử dụng các thành phần của riêng tôi (như HomeComponent) tại các giải pháp @Yurzui và @Linksonder 's. https://plnkr.co/edit/27x0eg?p=preview

Về cơ bản, thêm AppModule vào DynamicHtmlModule dưới dạng nhập bổ sung bên trong createComponentFactory().

@NgModule({ imports: [AppModule, CommonModule, RouterModule, SharedModule], declarations: [decoratedCmp] }) 
class DynamicHtmlModule { } 

Và xuất khẩu các thành phần riêng của chúng tôi tại AppModule

@NgModule({ 
    ... 
    exports: [HomeComponent, AboutComponent], 
    ... 
}) 
export class AppModule { }