[ANGULAR] Angular 2/4 : iframe에 컴파일 된 구성 요소를 추가합니다

Angular 2/4 : iframe에 컴파일 된 구성 요소를 추가합니다

해결법

1. ---

   1.ComponentRef 인스턴스를 작성한 다음 원하는 위치에 해당 compref.location.nativeElement를 삽입 할 수 있습니다.

   ComponentRef 인스턴스를 작성한 다음 원하는 위치에 해당 compref.location.nativeElement를 삽입 할 수 있습니다.

   나는 그것을 다음과 같이 할 것입니다. Plunker 예제 :

   @Component({
     selector: 'my-app',
     template: `
       <button (click)="createComponent()">Create component</button>
       <iframe #iframe (load)="onLoad()"></iframe>
     `,
   })
   export class App implements AfterViewInit, OnDestroy {
     @ViewChild('iframe') iframe: ElementRef;
   
     doc: any;
     compRef: ComponentRef<DynamicComponent>;
   
     constructor(
       private vcRef: ViewContainerRef,
       private resolver: ComponentFactoryResolver) {}
   
   
     createComponent() {
       const compFactory = this.resolver.resolveComponentFactory(DynamicComponent);
       this.compRef = this.vcRef.createComponent(compFactory);
   
       this.doc.body.appendChild(this.compRef.location.nativeElement);
     }
   
     onLoad() {
       this.doc = this.iframe.nativeElement.contentDocument || 
                  this.iframe.nativeElement.contentWindow;
     }
   
     ngAfterViewInit() {
       this.onLoad(); // in Firefox state is uninitialized while 
                      // in Chrome is complete so i use `load` event for Firefox
     }
   
     ngOnDestroy() {
       if(this.compRef) {
         this.compRef.destroy();
       }
     }
   }
   

   `entryComponents 배열에 동적 구성 요소를 추가하는 것을 잊지 마십시오

from https://stackoverflow.com/questions/42875013/angular-2-4-add-compiled-component-to-an-iframe by cc-by-sa and MIT license