[ANGULAR] 제 3 자 라이브러리에서 DOM 요소 내에 각도 2 구성 요소를 렌더링 할 수 있습니까?

제 3 자 라이브러리에서 DOM 요소 내에 각도 2 구성 요소를 렌더링 할 수 있습니까?

해결법

1. ---

   1.예, 구성 요소를 동적으로 인스턴스화하면 DOM 요소를 Component Creation 메서드로 전달할 수 있습니다. 이 DOM 요소는 새로 생성 된 구성 요소의 호스트로 작동합니다. 그러나 변경 탐지를 수동으로 트리거해야합니다. 각도 CDK는 포털 호스트를 도입하여 문제를 해결합니다.

   예, 구성 요소를 동적으로 인스턴스화하면 DOM 요소를 Component Creation 메서드로 전달할 수 있습니다. 이 DOM 요소는 새로 생성 된 구성 요소의 호스트로 작동합니다. 그러나 변경 탐지를 수동으로 트리거해야합니다. 각도 CDK는 포털 호스트를 도입하여 문제를 해결합니다.

   다음은 기본적인 예입니다.

   @Component({
       selector: 'a-comp',
       template: `<h2>I am {{name}}</h2>`
   })
   export class AComponent {
     name = 'A component';
   }
   
   @Component({
     selector: 'my-app',
     template: `
       <div>
         <h2>Hello {{name}}</h2>
       </div>
     `,
   })
   export class AppComponent {
       name = `Angular! v${VERSION.full}`;
       componentRef;
   
       constructor(r: ComponentFactoryResolver, i: Injector) {
           const someDOMElement = document.querySelector('.host');
           const f = r.resolveComponentFactory(AComponent);
           this.componentRef = f.create(i, [], someDOMElement);
       }
   
       ngDoCheck() {
           this.componentRef.changeDetectorRef.detectChanges();
       }
   }
   

   여기에 플러커가 있습니다.

   이 문서의 동적 구성 요소에 대한 자세한 내용은 읽을 수 있습니다.

from https://stackoverflow.com/questions/45390312/can-one-render-angular-2-components-inside-dom-elements-from-third-party-librari by cc-by-sa and MIT license