Angualr2动态组件加载器

在Angular2中，组件是我们建立并指定页面上的元素和逻辑的主要途径。而我们通常加载它在其中包含了一些条件，使其加载动态标记的标签。

但也有情况下，我们不知道在编译时DOM结构。在这种情况下，我们必须对任意位置的需求添加组件，因此我们使用DynamicComponentLoader动态加载的组件。在这种情况下，我们将能够在指定的位置来实例化一个组件，它连接到一个视图。

beta16之前，DynamicComponentLoader有三种方法，升级后删除了一种方法

loadAsRoot：

创建了一个组件的一个实例并将其附加到的第一个元素，该组件的选择相匹配的DOM。

import {Component, DynamicComponentLoader, Injector ,ComponentRef} from ‘@angular/core‘;
import {CommonComponent} from ‘./common.component‘;
@Component({
    template: `
    <div class="box">
        <button (click)="form()">View Form</button>
        <div id="form">Welcome..! Here form component will be loaded.</div>
    </div>
    `,
    styles : [`
        .box {padding-top:2rem;}
    `]
})
export class LoadAsRoot {
    constructor(public dcl:DynamicComponentLoader, public _injector:Injector){}
    form(){
      this.dcl.loadAsRoot(CommonComponent,"#form",this._injector)
            .then((ComponentRef:ComponentRef) => {
                console.log(ComponentRef);
            })
    }
}

loadNextToLocation

创建一个组件并将其添加到当前组件的后面next siblings

loadNextToLocation.ts

import {Component, DynamicComponentLoader, Injector, ViewContainerRef ,ComponentRef} from ‘@angular/core‘;
import {Common} from ‘./common‘;

@Component({
    selector: ‘my-app‘,
    providers: [],
    template: `

    <div *ngIf="user">
        <div>姓名：{{user.username}}</div>
        <div>年龄：{{user.age}}</div>
    </div>
    <div *ngIf="!user">
        <div><button (click)="loadNext()">添加数据</button></div>
        <div>暂无数据</div>
    </div>
  `,
    directives: []
})
export class LoadNextToLocation {
    public user: any;
    constructor(public dcl:DynamicComponentLoader, public _injector:Injector, public _elementRef: ViewContainerRef) {}

    loadNext(){
        this.dcl.loadNextToLocation(Common,this._elementRef)
            .then((ComponentRef:ComponentRef) => {
                let instance = ComponentRef.instance;
                instance.ref = ComponentRef
                instance.name = ‘添加数据‘;
                instance.finally.subscribe((user)=>{
                    ComponentRef.destroy();
                    this.user = user;
                })
                return ComponentRef;
            })
    }
}

common.ts

import {Component ,Input , Output, ComponentRef , EventEmitter } from ‘@angular/core‘;
@Component({
    template: `
        <div>
            <div>{{name}}</div>
            <div><input type="text"  [(ngModel)]="data.username" placeholder="用户名"></div>
            <div><input type="text"  [(ngModel)]="data.age" placeholder="年龄"></div>
            <div><button (click)="destory()">提交</button></div>
            <div><button (click)="cancel()">取消</button></div>
        </div>
    `
})
export class Common{
    private  data: {username: string, age: string} = {
        username: ‘‘,
        age: ‘‘
    }

    @Input() name: string;
    @Input() ref: ComponentRef;
    @Output() finally = new EventEmitter();

    cancel(){
        this.ref.destroy();
        console.log(`cancel`)
    }

    destory(){
        console.log(this.data);
        this.finally.emit(this.data);
    }
}

组件间传递数据通过@input 和 @output

ComponentResolver也可以动态加载组件

import {Component, DynamicComponentLoader,ComponentResolver Injector, ViewContainerRef ,ComponentRef} from ‘@angular/core‘;
import {PagesComponent} from ‘./pages.component‘;

@Component({
    selector: ‘my-app‘,
    providers: [],
    template: `

    <div *ngIf="user">
        <div>姓名：{{user.username}}</div>
        <div>年龄：{{user.age}}</div>
    </div>
    <div *ngIf="!user">
        <div><button (click)="loadNext()">添加数据</button></div>
        <div>暂无数据</div>
    </div>
  `,
})
export class LoadNextToLocation {
    public user: any;
    constructor(public dcl:DynamicComponentLoader, public viewContainerRef: ViewContainerRef , compiler: ComponentResolver ) {
        compiler.resolveComponent(PagesComponent).then((factory) =>
            viewContainerRef.createComponent(factory, 0, viewContainerRef.injector)).then((ComponentRef:ComponentRef) => {
            let instance = ComponentRef.instance;
            instance.ref = ComponentRef
            instance.name = ‘添加数据‘;
            instance.finally.subscribe((user)=>{
                ComponentRef.destroy();
                this.user = user;
            })
            return ComponentRef;
        });
    }

    loadNext(){
        this.dcl.loadNextToLocation(PagesComponent,this.viewContainerRef)
            .then((ComponentRef:ComponentRef) => {
                let instance = ComponentRef.instance;
                instance.ref = ComponentRef
                instance.name = ‘添加数据‘;
                instance.finally.subscribe((user)=>{
                    ComponentRef.destroy();
                    this.user = user;
                })
                return ComponentRef;
            })
    }
}