Próbuję przełączać menu nawigacji po stronie, znajdujące się u góry głównego szablonu aplikacji, za pomocą przycisku w zagnieżdżonym komponencie potomnym. Nie mogę wymyślić, jak dostać się do komponentu sidenav w rodzica, aby powiedzieć to do sidenav.open()
.Dostęp do elementu nadrzędnego @Component i zmiennych z komponentu * Routed * Child Komponent
Wiem o @Input i @Output na składniku podrzędnym, ale jak rozumiem, do korzystania z tego muszę mieć jakiś tag DOM dla elementu podrzędnego, aby dołączyć je do? Takich jak:
<app>
<sidenav-component #sidenav>...</sidenav-component>
<child [someInput]="some_parent_var" (childOpensNav)="sidenav.open()"></child>
</app>
Mnóstwo artykułów o tym, jak to zrobić. Problem polega na tym, że jestem routing do tego składnika, więc nie istnieje znaczek <child>
w kodzie. Raczej mój kod jest tak:
<app>
<sidenav-component #sidenav>...</sidenav-component>
<router-outlet></router-outlet>
</app>
Jeśli mam element podrzędny, który kierowany jest do, jak mogę zrobić sidenav.open()
lub w jakiś sposób uzyskać dostęp do komponentu w rodzica z dzieckiem?
Kilka myśli: Zrobiłem kilka badań i zastanawiałem się nad kilkoma podejściami i nie jestem pewien, czy są poprawne, czy nawet działają ... Jednym ze sposobów korzystania z usługi wtryskiwacza i próby przejścia do rodzica, ale czuje się źle:
// child component
constructor(injector: Injector) {
this.something = injector.parent.get(Something);
}
ewentualnie stworzenie usługi na rodzica, jakoś przymocowany do elementu Sidenav a następnie wstrzykując tę usługę do dziecka ??
To jest dosłownie to, co próbuję zrobić. Nie mogę uwierzyć, że znalazłem twoje pytanie. Dzięki. Mam nadzieję, że przejdę w dół i otrzymam dobrą odpowiedź. – krummens