Angular2 – динамически загружать компонент из модуля

в моем угловом приложении у меня есть следующее:

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("#"); (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, правильно?

Я попытался выкопать исходный код angular2 из github, но он довольно обширен, я должен попробовать VS-код или что-то еще, с intellisense, но я ленив … и я должен прочитать этот материал из документации, которая довольно туманна в angular.io для этого конкретного аргумента, который представляет собой ленивую загрузку компонентов и модhive без маршрутизатора.

Любая помощь приветствуется, я думаю, что решение прост в применении, но трудно найти без официальной документации.

Основываясь на ответе yurzui, я пришел к следующему коду:

 export 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("#"); (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) => { const factory = moduleWithFactories.componentFactories.find(x => x.componentType.name === componentName); // Crucial: componentType.name, not componentType!! let componentRef = this.placeholderRef.createComponent(factory, 0); }); } }

Обновить:

Если вы хотите использовать его вместе с компиляцией aot, вы должны вручную предоставить компилятор как

 export function createJitCompiler () { return new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler(); } ... providers: [ { provide: Compiler, useFactory: createJitCompiler} ],

пример

Старая версия

Это может помочь вам:

 this.compiler.compileModuleAndAllComponentsAsync(DynamicModule) .then(({moduleFactory, componentFactories}) => { const compFactory = componentFactories .find(x => x.componentType === DynamicComponent); const cmpRef = this.placeholderRef.createComponent(compFactory, 0);

Смотрите также