Jak obsługiwać/dostarczać właściwości @Input
i @Output
dla dynamicznie tworzonych komponentów w Angular 2?Uchwyt @ Input i @Output dla dynamicznie tworzonego komponentu w Angular 2
Ideą jest stworzenie dynamicznie (w tym przypadku) z podkomponent gdy createSub wywoływana jest metoda. Widoki są w porządku, ale jak mogę podać dane dla właściwości @Input
w SubComponent. Ponadto, jak obsługiwać/subskrybować zdarzenia, które zapewnia SubComponent?
przykład: (Oba elementy są w tym samym 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
}
}
podrzędny
@Component({
selector: 'app-sub'
})
export class SubComponent {
@Input('data') someData: string;
@Output('onClick') onClick = new EventEmitter();
}
W przeszłości można było zrobić coś takiego ... 'ref.instance.someData = someData'. Nie jestem pewien, czy tak jest nadal. –
To nadal działa. Nie ma innego sposobu (z wyjątkiem korzystania z usług wspólnych do komunikacji). http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 zawiera więcej szczegółów. –
@KrisHollenbeck @ Günter Zöchbauer Dzięki. Więc za każdym razem, gdy dane zmieniają się w komponencie nadrzędnym, muszę ustawić go jako "ref.instance.someData = someData" i uruchomić detekcję zmian ("ref.changeDetectorRef.detectChanges();")? A jak sprawdzić, która właściwość w podskładniku jest właściwa? Mógłby być nazwany zupełnie innym ...:/Może użyć 'Reflection' bezpośrednio Spróbuję :) – thpnk