Динамическая загрузка существующих компонентов 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, который экспортирует все мои элементы управления.