¿Cómo crear dinámicamente modales bootstrap como componentes Angular2?

Título original : no se puede inicializar componente añadido dinámicamente (HTML) en Angular 2

Creé una directiva que agrega un modal al cuerpo en la inicialización. Cuando se hace clic en un botón (con la directiva inyectada en él), este modal se dispara. Pero quiero que los contenidos de este modal sean otro componente (de hecho, quiero que el modal sea el componente). Parece que no puedo inicializar el componente.

Aquí hay un plunker de lo que hice:

http://plnkr.co/edit/vEFCnVjGvMiJqb2Meprr?p=preview

Estoy tratando de hacer que mi comp la plantilla de mi componente

' 

actualización para 2.0.0 final

Ejemplo de 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; } } 

Insinuación

Si una aplicación cambia el estado en SharedService o llama a un método que hace que un Observable emita un valor y el suscriptor esté en una aplicación diferente, entonces el emisor, el código en el suscriptor se ejecuta en la NgZone del emisor.

Por lo tanto, al suscribirse a un observable en SharedService use

 class MyComponent { constructor(private zone:NgZone, private sharedService:SharedService) { private sharedService.subscribe(data => this.zone.run() => { // event handler code here }); } } 

Para obtener más detalles sobre cómo activar la detección de cambios, consulte Cómo activar la detección de cambios Angular2 manualmente.

original

HTML no procesa dinámicamente el HTML añadido dinámicamente y no da lugar a la creación de instancias o a la adición de componentes o directivas.

No puede agregar componentes fuera del componente raíz de Angulars (AppComponent) utilizando DynamicComponentLoader (en desuso) ViewContainerRef.createComponent() ( tabs dinámicas Angular 2 con componentes elegidos por el usuario ).

Supongo que el mejor enfoque es crear un segundo componente fuera de los componentes de raíz de Angulars es llamar a bootstrap() en cada uno y usar un servicio compartido para comunicarse:

 var sharedService = new SharedService(); bootstrap(AppComponent, [provide(SharedService, {useValue: sharedService})]); bootstrap(ModalComponent, [provide(SharedService, {useValue: sharedService})]); 

Ejemplo de Plunker beta.17
Ejemplo de 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: `  ` }) 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: ` 

My First Attribute Directive



`, }) export class AppComponent { constructor(private sharedService:SharedService) {} showDialog() { this.sharedService.showModal.next(CompComponent); } }