W Angular Docs jest temat słuchania dziecięcych wydarzeń od rodziców. W porządku. Ale moim celem jest coś odwrotnego !. W mojej aplikacji jest „admin.component”, który przechowuje widok układu strony administratora (menu paska bocznego, pasek zadań, status itp.). W tym komponencie nadrzędnym skonfigurowałem system routerów do zmiany widoku głównego między innymi stronami administratora. Problem polega na zapisywaniu rzeczy po zmianie, użytkownik klika przycisk Zapisz na pasku zadań (który jest umieszczony w komponencie admin.component), a komponent potomny musi nasłuchiwać tego zdarzenia kliknięcia, aby wykonać zapisywanie personelu.
javascript
typescript
angular
rxjs
eventemitter
Hamed Hamedi
źródło
źródło
Odpowiedzi:
Myślę, że ten dokument mógłby ci pomóc:
W rzeczywistości możesz wykorzystać obserwowalny / temat, który rodzic zapewnia swoim dzieciom. Coś w tym stylu:
@Component({ (...) template: ` <child [parentSubject]="parentSubject"></child> `, directives: [ ChildComponent ] }) export class ParentComponent { parentSubject:Subject<any> = new Subject(); notifyChildren() { this.parentSubject.next('some value'); } }
Komponent potomny może po prostu zasubskrybować ten temat:
@Component({ (...) }) export class ChildComponent { @Input() parentSubject:Subject<any>; ngOnInit() { this.parentSubject.subscribe(event => { // called when the notifyChildren method is // called in the parent component }); } ngOnDestroy() { // needed if child gets re-created (eg on some model changes) // note that subsequent subscriptions on the same subject will fail // so the parent has to re-create parentSubject on changes this.parentSubject.unsubscribe(); } }
W przeciwnym razie możesz w podobny sposób wykorzystać usługę współdzieloną zawierającą taki temat ...
źródło
Pomyślałem, że ze względu na potomność wspomnę o bardziej konwencjonalnym rozwiązaniu tego problemu : po prostu uzyskaj odniesienie do ViewChild, a następnie wywołaj bezpośrednio jedną z jego metod.
@Component({ selector: 'app-child' }) export class ChildComponent { notifyMe() { console.log('Event Fired'); } } @Component({ selector: 'app-parent', template: `<app-child #child></app-child>` }) export class ParentComponent { @ViewChild('child') private child: ChildComponent; ngOnInit() { this.child.notifyMe(); } }
źródło
Cannot read property 'notifyMe' of undefined
.ngOnDestroy()
metodzie. Jeśli o mnie chodzi, to jest zbyt niejasne. To tylko błąd czekający na wystąpienie IMHO.Jeśli dobrze zrozumiem pytanie, możliwe będzie tutaj bardziej proste podejście. Założenia -
W komponencie macierzystym
<button type="button" (click)="prop1=!prop1">Save Button</button> <app-child-component [setProp]='prop1'></app-child-component>
A w dziecku ...
prop1:boolean; @Input() set setProp(p: boolean) { // -- perform save function here }
To po prostu wysyła kliknięcie przycisku do komponentu podrzędnego. Stamtąd składnik potomny może niezależnie zapisywać dane.
EDYCJA: jeśli dane z szablonu nadrzędnego również muszą zostać przekazane wraz z kliknięciem przycisku, jest to również możliwe przy takim podejściu. Daj mi znać, jeśli tak jest, a zaktualizuję próbki kodu.
źródło
Dla tych, którzy otrzymują
Cannot read property 'notifyMe' of undefined
Spróbuj wywołać metodę wewnątrz
ngAfterViewInit()
intead ofngOnInit()
źródło