런타임에 각도를 설정하고, 컴파일하고, 구성 요소를 생성합니다.

Question

저는 문서 생성 도구를 각성시키고 자 노력하고 있습니다. 사용자가 동적으로 내용을 만들 수있게하는 방법에 대한 도전이 있습니다.

만들려는 구성 요소에는 임의의 모델과 동작이있을 수 있으므로 공유 구성 요소를 사용할 수는 없다고 생각합니다.

설명하는 구성 요소는 컴파일 할 때 존재하지 않습니다.

일부는 documentation for rendering dynamic components입니다. 그러나 ngModule에 entryComponents의 "동적"구성 요소를 나열해야한다고 언급합니다. 어느 내 시나리오에 대한 작동하지 않습니다.

이 효과를 얻기위한 또 다른 메커니즘이 있습니까?

Answer 1

즉석에서 모듈과 구성 요소를 만들고 데코레이터를 적용한 다음 모두 컴파일 할 수 있습니다. 그러면 컴파일 된 구성 요소에 액세스 할 수 있습니다.

@ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef; 

constructor(private _compiler: Compiler, 
      private _injector: Injector, 
      private _m: NgModuleRef<any>) { 
} 

ngAfterViewInit() { 
    const template = '<span>generated on the fly: {{name}}</span>'; 

    const tmpCmp = Component({template: template})(class { 
    }); 
    const tmpModule = NgModule({declarations: [tmpCmp]})(class { 
    }); 

    this._compiler.compileModuleAndAllComponentsAsync(tmpModule) 
    .then((factories) => { 
     const f = factories.componentFactories[0]; 
     const cmpRef = f.create(this._injector, [], null, this._m); 
     cmpRef.instance.name = 'dynamic'; 
     this.vc.insert(cmpRef.hostView); 
    }) 
} 

이 접근 방식을 사용하려면 컴파일러를 런타임에 가져와야합니다.

• Here is what you need to know about dynamic components in Angular

: 동적 구성 요소에 대한 자세한 내용은 문서를 읽어