2.0.0正式版更新
Plunker示例>= 2.0.0
@NgModule({
imports: [ BrowserModule ],
declarations: [ App, ModalComponent, CompComponent],
providers: [SharedService],
entryComponents: [CompComponent],
bootstrap: [ App, ModalComponent ]
})
export class AppModule{}
export class ModalComponent {
@ViewChild('theBody', {read: ViewContainerRef}) theBody;
cmp:ComponentRef;
constructor(
sharedService:SharedService,
private componentFactoryResolver: ComponentFactoryResolver,
injector: Injector) {
sharedService.showModal.subscribe(type => {
if(this.cmp) {
this.cmp.destroy();
}
let factory = this.componentFactoryResolver.resolveComponentFactory(type);
this.cmpRef = this.theBody.createComponent(factory)
$('#theModal').modal('show');
});
}
close() {
if(this.cmp) {
this.cmp.destroy();
}
this.cmp = null;
}
}
提示
如果一个应用程序更改了SharedService
中的状态或调用导致Observable
发出值并且订阅者位于不同的应用程序中,则订阅者中的代码将在发射器的NgZone
中执行。
因此,在SharedService
中订阅可观察对象时,请使用
class MyComponent {
constructor(private zone:NgZone, private sharedService:SharedService) {
private sharedService.subscribe(data => this.zone.run() => {
});
}
}
如何手动触发Angular2变更检测的详细信息请参见Triggering Angular2 change detection manually
翻译后
由代码动态添加的HTML不会被Angular处理,也不会实例化或添加组件或指令。
使用DynamicComponentLoader
(已作废) ViewContainerRef.createComponent()
(Angular 2 dynamic tabs with user-click chosen components)无法在Angular的根组件(AppComponent)之外添加组件。
我认为最好的方法是在Angular的根组件之外创建第二个组件,然后对它们分别调用bootstrap()
并使用共享服务进行通信:
var sharedService = new SharedService();
bootstrap(AppComponent, [provide(SharedService, {useValue: sharedService})]);
bootstrap(ModalComponent, [provide(SharedService, {useValue: sharedService})]);
Plunker示例 beta.17
Plunker示例 beta.14
@Injectable()
export class SharedService {
showModal:Subject = new Subject();
}
@Component({
selector: 'comp-comp',
template: `MyComponent`
})
export class CompComponent { }
@Component({
selector: 'modal-comp',
template: `
<div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="theModalLabel">
<div class="modal-dialog largeWidth" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="theModalLabel">The Label</h4></div>
<div class="modal-body" #theBody>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" (close)="close()">Close</button>
</div></div></div></div>
`
})
export class ModalComponent {
cmp:ComponentRef;
constructor(sharedService:SharedService, dcl: DynamicComponentLoader, injector: Injector, elementRef: ElementRef) {
sharedService.showModal.subscribe(type => {
if(this.cmp) {
this.cmp.dispose();
}
dcl.loadIntoLocation(type, elementRef, 'theBody')
.then(cmp => {
this.cmp = cmp;
$('#theModal').modal('show');
});
});
}
close() {
if(this.cmp) {
this.cmp.dispose();
}
this.cmp = null;
}
}
@Component({
selector: 'my-app',
template: `
<h1>My First Attribute Directive</h1>
<button (click)="showDialog()">show modal</button>
<br>
<br>`,
})
export class AppComponent {
constructor(private sharedService:SharedService) {}
showDialog() {
this.sharedService.showModal.next(CompComponent);
}
}