Ich arbeite an einem kleinen Projekt, wo ich eine mobile erste Anwendung schreibe. Dafür plane ich eine Navbar oben auf dem Bildschirm und eine Folie im Menü auf der linken Seite. Ich möchte, dass diese Komponenten auf jeder Seite verfügbar sind.Welche Möglichkeiten gibt es, Ereignisse mit mehreren Komponenten zu behandeln?
Meine heutige Architektur ist wie folgt aufgebaut:
<app-component>
-> <navbar-component>
-> <sidemenu-component>
-> <router-outlet><!-- The different pages will be placed here !--></router-outlet>
Jetzt i auf eine Schaltfläche klicken, um in der Lage sein wollen, in der navbar-component die sidemenu-component zu öffnen.
Dafür benötige ich einen Verweis der anderen Komponente entweder im Sidemenu, um auf dem Klickereignis zu registrieren, oder in der Navigationsleiste, um das Sidemenü auszulösen.
Meine ursprüngliche Idee war, die @Input() und @Output() Eigenschaften zu verwenden, um die Referenzen der Komponenten zu übergeben.
//app-component.html
<navbar-component [parentComponent]="referenceToAppComponent" (instance)="navbarComponent"></navbar-component>
<sidemenu-component [parentComponent]="referenceToAppComponent" (instance)="sidemenuComponent"></sidemenu-component>
Nein, müssen Sie nicht Verweise auf Komponenten benötigen. Teilen Sie einfach einen Dienst zwischen den beiden Komponenten und geben Sie Ereignisse (unter Verwendung einer Observablen) von diesem freigegebenen Dienst aus. https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service –
Sie könnten den Router dazu verwenden, dies zu tun. Sie könnten benannte Outlets verwenden und die Öffnung des Menüs als Route selbst ausdrücken und über die Navigationsleiste dorthin navigieren –