각도 2 - ComponentResolver를 사용하여 런타임에 다운로드 한 구성 요소를로드하십시오.

Question

구성 요소를 Angular2 앱에 동적으로로드하려고합니다. 동적으로 부모 컴포넌트의 템플릿에서 누락 된 컴포넌트를 DOM에 삽입한다는 의미는 아닙니다. 서버에서 다른 구성 요소를 다운로드하는 것은 사용자가 필요하지 않을 수도 있기 때문에 다른 구성 요소를 다운로드 한 다음 DOM에 삽입하기 때문입니다. 따라서을 따라 Systemjs로 구성 요소를로드하는 방법을 이해했습니다. 이제 RC4에서 this 및 ComponentResolver를 사용하여 DOM에 사물을 주입해야합니다.

export class ModuleWrapperComponent implements OnInit { 
    @ViewChild("module", { read: ViewContainerRef }) target: ViewContainerRef; 
    @Input() isOpen: boolean; 
    @Input() moduleId: number; 
    type: string = null; 
    moduleRef: ComponentRef<any> = null; 

    private isViewInitialized: boolean = false; 

    constructor(private resolver: ComponentResolver) { } 

    private _loadModule(moduleId: number): Promise<string> { 
     if (!!this.type) 
      return Promise.resolve(this.type); 

     var mod = { 
      component: "DashboardComponent", 
      path: "/app/modules/dashboard.component" 
     }; 
     return System 
      .import(mod.path) 
      .then(() => this.type = mod.component); 
    } 

    updateComponent() { 
     if (!this.isViewInitialized) 
      return; 

     if (!!this.moduleRef) 
      this.moduleRef.destroy(); 

     if (this.isOpen) { 
      this._loadModule(this.moduleId) 
       .then(type => { 
        this.resolver.resolveComponent(type) 
         .then(factory => { 
          this.moduleRef = this.target.createComponent(factory) 
          // to access the created instance use 
          // this.compRef.instance.someProperty = 'someValue'; 
          // this.compRef.instance.someOutput.subscribe(val => doSomething()); 
         }); 
       }) 
     } 
    } 

    ngOnChanges() { 
     this.updateComponent(); 
    } 

    ngAfterViewInit() { 
     this.isViewInitialized = true; 
     this.updateComponent(); 
    } 

    ngOnDestroy() { 
     if (!!this.moduleRef) 
      this.moduleRef.destroy(); 
    } 
} 

는 슬프게도, 나는 ComponentResolver이 오류를 얻을 : 오류 : 'DashboardComponent'를 사용하여 구성 요소를 확인할 수 없습니다

그래서 여기에 물건을 조립해야하는 모듈 래퍼 구성 요소에 대한 내 코드입니다. new BaseException $ 1 (http://localhost:63815/lib/@angular/compiler//bundles/compiler.umd.js:971:27)

Systemjs에서 모듈을로드하는 것만으로는 충분하지 않다고 생각합니다. 그렇다면 새 구성 요소를 다운로드했음을 ComponentResolver에 어떻게 알려야합니까? 공식 문서는 아직 젊고 부족합니다 ...

사이드 노트에서 내 대시 보드 구성 요소가 가져 오기와 함께 추가 물건을로드한다고 ... Systemjs가 자동으로 처리합니다. 그렇지 않습니까?

미리 감사드립니다.

Answer 1

이 질문에 대한 답변이 정확하지 않습니다.

BUT, 우리는 비슷한 요구 사항을 가지고 있었고 SystemJs를 사용하여 구성 요소를 동적으로로드했습니다. 그것은이었다 모두 우리가 빌드 및 배포 전략에 대해 생각하기 시작하고는 런타임에 알려져있다 의 moduleID의 값 때문에 Webpack

에 걸쳐 올 때까지 잘 작동, 그래서 웹팩 컴파일에서의 실제 모듈의 구성 요소를 해결 할 수 없습니다 해당 파일을 번들로 제공하지 않습니다.

는 당신은 당신이 그들을 당신의 단일 의 한 부분으로 번들되도록하려면 코드에서 어딘가에 동적 모듈 구성 요소에 대한 고정 수입이 있어야합니다

는

을 app.js