modal - formularios en angular 6

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

Question

Título original : No se puede inicializar el componente agregado dinámicamente (HTML) en Angular 2

He creado una directiva que agrega un modal al cuerpo en la inicialización. Cuando se hace clic en un botón (con la directiva inyectada), se activa este modal. Pero quiero que el contenido de este modal sea 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 he hecho:

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

Estoy tratando de hacer que my-comp sea la plantilla de mi componente

 ''<div class="modal-body" #theBody>'' 
            + ''<my-comp></my-comp>'' + 
 ''</div>

Answer 1

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 al emisor, el código en el suscriptor se ejecuta en la NgZone del emisor.

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

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

Angular agrega dinámicamente HTML no es procesado y no da como resultado componentes o directivas para ser instanciadas o agregadas.

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

Supongo que el mejor enfoque es crear un segundo componente fuera del componente 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: `
  <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);
  }
}