Я пытаюсь загрузить динамически компонент в финальной версии 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, resolver больше не существует, был заменен компилятором.
Я нашел множество мест, показывающих, как загрузить его с помощью разных кодов, но все они слишком сложны, и я не мог заставить его работать.
Возьмем это, например: Как я могу использовать/создавать динамический шаблон для компиляции динамического компонента с Angular 2.0?
Это выглядит более конкретным для этого сценария, но мне просто нужно загрузить компонент и установить вызываемую модель @Input.
Одна вещь, когда я пытался создать динамически модуль для каждого компонента, а затем добавить к нему компонент. Но потом у меня возникли проблемы с тем, что компонент был установлен в более чем одном модуле, попытайтесь удалить в некотором месте неработоспособное.
Большая часть показанного кода я получаю по этой ссылке: http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2-rc-5/
И сделал пару изменений.
Update
Мне удалось заставить его работать, используя следующий подход:
Метод create был изменен на
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;
});
}
В большинстве найденных мест, создайте компонент и установите его в DynamicModule, проблема в том, что вы уже заявляете, что тот же компонент в другом модуле, Angular собирается жаловаться. Решение в моем случае состояло в том, чтобы импортировать мой ControlsModule, который экспортирует все мои элементы управления.