标签：
在Angular2中，组件是我们建立并指定页面上的元素和逻辑的主要途径。而我们通常加载它在其中包含了一些条件，使其加载动态标记的标签。
但也有情况下，我们不知道在编译时DOM结构。在这种情况下，我们必须对任意位置的需求添加组件，因此我们使用DynamicComponentLoader动态加载的组件。在这种情况下，我们将能够在指定的位置来实例化一个组件，它连接到一个视图。
beta16之前，DynamicComponentLoader有三种方法，升级后删除了一种方法
创建了一个组件的一个实例并将其附加到的第一个元素，该组件的选择相匹配的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);
})
}
}
创建一个组件并将其添加到当前组件的后面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
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;
})
}
}
标签：
原文地址：http://www.cnblogs.com/bq-med/p/5431429.html
