Динамически загружать существующие компоненты Angular 2 Final Release
Я пытаюсь динамически загрузить компонент в финальной версии 2.0.0.
Используя RC5 я загружал используя следующий код:
Создайте директиву для загрузки элементов управления:
import {
CheckboxComponent, CheckboxListComponent,DatePickerComponent
} from '../components/';
@Directive({
selector: '[ctrl-factory]'
})
export class ControlFactoryDirective implements OnChanges {
@Input() model: any;
constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) {
}
create(cp) {
this.resolver.resolveComponent(cp)
.then(factory => {
const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
this.vcRef.createComponent(factory, 0, injector, []);
let ch = this.vcRef.createComponent(factory, 0, injector, []).instance;
ch.model = this.model;
});
}
ngOnChanges() {
if (!this.model) return;
switch (this.model.type) {
case 'checkbox':
this.create(CheckboxComponent);
break;
case 'checkboxlist':
this.create(CheckboxListComponent);
break;
case 'datepicker':
this.create(DatePickerComponent);
break;
default:
break;
}
}
}
Затем загрузил эту директиву на моей странице следующим образом:
<div ctrl-factory *ngFor="let child of page.childrens" [model]="child"></div>
Но после обновления с окончательного выпуска rc5 до 2.0.0 распознаватель больше не существует, его заменил компилятор.
Я нашел множество мест, показывающих, как загрузить его, используя разные коды, но все это слишком сложно, и я не мог заставить его работать.
Возьмем для примера: как я могу использовать / создать динамический шаблон для компиляции динамического компонента с Angular 2.0?
Это выглядит более конкретно для этого сценария, мой единственный, мне просто нужно загрузить компонент и установить @Input с именем model.
Одна вещь, когда я пытался, мне нужно было динамически создать модуль для каждого компонента, а затем добавить компонент к нему. Но затем у меня возникли проблемы, сказав, что компонент был установлен в более чем один модуль, попробуйте удалить в некоторых местах не работает.
Основную часть показанного кода я получаю по этой ссылке: http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2-rc-5/
И сделал пару изменений.
Обновить
Мне удается заставить это работать, используя следующий подход:
Метод создания был изменен на
private create(cp) {
@NgModule({
imports: [BrowserModule, ControlsModule],
declarations: []
})
class DynamicModule {}
this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
.then(({componentFactories}) => {
const compFactory = componentFactories.find(x => x.componentType === cp);
const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
const cmpRef = this.vcRef.createComponent(compFactory, 0, injector, []);
cmpRef.instance.model = this.model;
});
}
В большинстве мест, которые я нашел, установите создание Component и установите его в DynamicModule, проблема в том, что когда вы уже объявляете тот же компонент в другом модуле, angular собирается жаловаться. Решение в моем случае состояло в том, чтобы импортировать мой ControlsModule, который экспортирует все мои элементы управления.
2 ответа
Обновить
NgComponentOutlet был представлен в 4.0.0-бета.3 https://github.com/angular/angular/commit/8578682
Скоро NgComponentOutlet
Я вижу два варианта сделать это:
1) Использование ComponentFactoryResolver.
Он использует уже сгенерированную фабрику и код выглядит примерно так:
constructor(private vcRef: ViewContainerRef, private resolver: ComponentFactoryResolver) { }
create(comp) {
const factory = this.resolver.resolveComponentFactory(comp);
const compRef = this.vcRef.createComponent(factory);
(<any>compRef).instance.model = this.model;
}
В этом случае мы должны определить динамический компонент в declarations а также entryComponents свойства внутри декоратора модуля
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, DynamicComponent ],
entryComponents: [DynamicComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
2) Использование компилятора
В этом случае мы можем запустить компиляцию модуля только с помощью compiler.compileModuleAndAllComponentsAsync а затем найти компонент из массива componentFactories. Ваша директива может выглядеть так:
constructor(private vcRef: ViewContainerRef, private loader: DynamicLoaderService) { }
create(comp) {
this.loader.createComponentFactory(comp).then(factory => {
const compRef = this.vcRef.createComponent(factory);
(<any>compRef).instance.model = this.model;
})
}
DynamicLoaderService это глобальный сервис, который будет загружать и хранить фабрики компонентов.
@Injectable()
export class DynamicLoaderService {
constructor(protected compiler: Compiler) {}
private resolveCompHelper$ = new Subject<any>();
private cache = new Map<string, ComponentFactory<any> | number>();
public createComponentFactory(type: string) : Promise<ComponentFactory<any>> {
let factory = this.cache.get(type);
// if factory has been already loading
if(factory === 1) {
return new Promise((resolve) => {
// waiting compilation of factory
const subscriber = this.resolveCompHelper$.subscribe((data) => {
if(type !== data.type) return;
subscriber.unsubscribe();
resolve(data.factory);
});
});
}
// factory exists in cache
if (factory) {
return new Promise((resolve) => resolve(factory));
}
const comp = typeMap[type];
// factory startes loading
this.cache.set(type, 1);
return new Promise((resolve) => {
this.compiler.compileModuleAndAllComponentsAsync(createComponentModule(comp))
.then((moduleWithFactories: ModuleWithComponentFactories<any>) => {
factory = moduleWithFactories.componentFactories
.find(x => x.componentType === comp);
this.cache.set(type, factory);
this.resolveCompHelper$.next({ type, factory});
resolve(factory);
});
});
}
}
Надеюсь, это поможет вам!
Для меня было полезно увидеть этот вариант на основе Директивы, но я нашел тот, который соответствует моим потребностям на основе Компонентов: https://www.ag-grid.com/ag-grid-angular-aot-dynamic-components/
Удачного кодирования!