Question

我最近将angular2应用程序升级到最终版本。

我尝试从网上提供的大量参考资料中实施，但没有成功。

在angular2 RC5中，我曾经使用编译器动态加载我的组件，如下所示：

@Input('component-name') componentName: string;
@Input('component-model') componentModel: any;
@ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef;
private cmpRef: ComponentRef<any>;
public toSet: any;
keysRegister: string[] = [
    'BASIC-CAROUSEL',
    'BS-JUMBOTRON'
]
componentNames: string[]=[
    "BasicCarouselComponent",
    "BsJumbotronComponent"
]

constructor(private _compiler: Compiler, private _viewContainerRef:ViewContainerRef) { }

ngOnInit() {
    this.toSet={
      'componentModel':this.componentModel,
      'componentInfo':this.componentInfo
    };
}
ngAfterViewInit(): void {
    let componentIndex = this.keysRegister.indexOf(this.componentName);
    console.log(this.componentNames[componentIndex]);
    if (this.cmpRef) {
       this.cmpRef.destroy();
    }
    this._compiler.compileComponentAsync(StandardLib[this.componentNames[componentIndex]]).then(comp => {
        let ref = this.target.createComponent(comp);
        if (this.toSet) {
            const keys = Object.keys(this.toSet);
            keys.forEach(a => ref.instance[a] = this.toSet[a])
        }
    });
}
ngOnDestroy() {
    if (this.cmpRef) {
      this.cmpRef.destroy();
      this.cmpRef = null;
    }
}

我使用toSet为组件设置实例变量。但是由于angular2已经发布，因此该方法已被弃用。而且我不确定如何在angular2 final中完成这项工作。

任何输入？

提前谢谢。

Answer 1

我这样做：

System.import('path/to/MyComponent')
            .then(fileContents => fileContents['MyComponent'])
            .then(component => {
                let factory = this.componentFactoryResolver.resolveComponentFactory(component);
                this.container.createComponent(factory); //container: ViewContainerRef
            });

在angular2 final中动态加载组件？

1 个答案: