在我的角度应用程序中,我有以下内容：
export class MyComponent {
subcompPath = "path-to-subcomp#SubcompClassName";
@ViewChild("placeholder",{ read: ViewComponentRef }) placeholderRef: ViewComponentRef;
/* Constructor where Compiler,ComponentFactoryResolver are injected */
loadSubcomponent() {
let [path,componentName] = this.subcompPath.split("#");
(<any>window).System.import(path)
.then((module: any) => module[componentName])
.then((type: any) => {
return this._compiler.compileComponentAsync(type)
})
.then((factory: any) => {
let componentRef = this.placeholderRef.createComponent(factory,0);
});
}
}
我的子组件声明了提供者和东西,指令和管道.
而现在RC6又打破了一切.组件不能声明指令和管道,但它们必须位于声明组件的模块中.
所以我必须加载SystemJS而不是组件本身而是模块.
好的,然后我应该使用
return this._compiler.compileModuleAndAllComponentsAsync(type)
很好,但是如何获得该特定组件的工厂参考？那个工厂就是我所需要的,placeholderRef想要它的createComponent方法,对吧？
我试图从github挖掘angular2源代码,但它非常庞大,我应该尝试使用VS Code或其他东西,使用intellisense,但我很懒…我应该从文档中读取这些内容,这在angular.io用于此特定参数,即没有路由器的组件和模块的延迟加载.
感谢任何帮助,我认为解决方案很容易应用,但没有官方文档很难找到.
根据yurzui的回答,我来到以下代码：
原文链接：/angularjs/141614.htmlexport class MyComponent {
subcompPath = "path-to-subcompMODULE#SubcompClassName";
@ViewChild("placeholder",{ read: ViewComponentRef }) placeholderRef: ViewComponentRef;
/* Constructor where Compiler,ComponentFactoryResolver are injected */
loadSubcomponent() {
let [modulePath,componentName] = this.subcompPath.split("#");
(<any>window).System.import(modulePath)
.then((module: any) => module["default"]) // Or pass the module class name too
.then((type: any) => {
return this._compiler.compileModuleAndAllComponentsAsync(type)
})
.then((moduleWithFactories: ModuleWithComponentFactories<any>) => {
const factory = moduleWithFactories.componentFactories.find(x => x.componentType.name === componentName); // Crucial: componentType.name,not componentType!!
let componentRef = this.placeholderRef.createComponent(factory,0);
});
}
}
