선택기 목록으로 각도 2 구성 요소 바인딩 문자열 형식

Question

목록 위젯 구성 요소 선택자를 각도 2로 정의합니다. <app-xxx-widget></app-xxx-widget>을 HTML 파일에 입력해도 여전히 정상입니다. 문제는 문자열 형식의 구성 요소 선택기 배열을 가지고 있으며 {{ widgetTag }} (*ngFor="let widgetTag of widgetTagList" 사용)을 바인딩하면 브라우저가 각도 구성 요소가 아닌 텍스트로 widgetTag를 인식한다는 것입니다. 이 문제를 어떻게 해결할 수 있습니까?
이 경우 불가능하다고 생각합니다.

Answer 1

동적으로 생성 할 수 있지만 약간 까다 롭지만 완전히 수행 할 수 있습니다.

일부 예 :

http://blog.rangle.io/dynamically-creating-components-with-angular-2/

https://medium.com/@tudorgergely/injecting-components-dynamically-in-angular-2-3d36594d49a0

https://angular.io/guide/dynamic-component-loader

기본 예 1 성분 로딩 :

• 주입 Injector 및
• 그것의 공장

  public component: any; 
  @ViewChild('componentReference') componentReference: any; 
  
  public createComponent(module: string, component: string) { 
  
  this.loader.load(module).then(
  
      (f: NgModuleFactory<any>) => { 
  
      const moduleRef = f.create(this.injector); 
  
      (<any>moduleRef.componentFactoryResolver)._factories.forEach(
       (cF) => { 
       if (cF.componentType.name === component) { 
  
        const fac = moduleRef.componentFactoryResolver.resolveComponentFactory(cF.componentType); 
        this.componentReference = this.component.createComponent(fac); 
       } 
       } 
      ); 
      }); 
  

  }

에서 구성 요소를 만들 만든 구성 요소

• 에 대한 참조를 유지하는 하나 개의 구성 요소 참조 요소를 추가 (예 : <div #componentReference></div>로) (210)

• 템플릿에 하나 개의 컨테이너 요소를 추가

이 예제는 구성 요소 .name으로 이루어졌지만 쉽게 변경할 수 있습니다. 그러나 당신은 당신 자신을 알아 내야 할 것입니다. 원하는 구성 요소가 모듈 entryComponents에 있는지 확인하십시오.