Как обрабатывать/предоставлять свойства @Input
и @Output
для динамически созданных Компонентов в Angular 2?
Идея состоит в том, чтобы динамически создавать (в данном случае) SubComponent при вызове метода createSub. Форкс отлично, но как я могу предоставить данные для свойств @Input
в SubComponent. Также, как обрабатывать/подписываться на события @Output
, которые предоставляет SubComponent?
Пример: (Оба компонента находятся в одном NgModule)
AppComponent
@Component({
selector: 'app-root'
})
export class AppComponent {
someData: 'asdfasf'
constructor(private resolver: ComponentFactoryResolver, private location: ViewContainerRef) { }
createSub() {
const factory = this.resolver.resolveComponentFactory(SubComponent);
const ref = this.location.createComponent(factory, this.location.length, this.location.parentInjector, []);
ref.changeDetectorRef.detectChanges();
return ref;
}
onClick() {
// do something
}
}
подкомпонент
@Component({
selector: 'app-sub'
})
export class SubComponent {
@Input('data') someData: string;
@Output('onClick') onClick = new EventEmitter();
}