我正在开展一个小型项目，我正在编写移动优先应用程序。 为此，我打算在屏幕顶部有一个导航栏，在左边的菜单中有一个幻灯片。我希望这些组件可以在每个页面/视图上使用。
我目前的架构是这样构建的：
<app-component>
-> <navbar-component>
-> <sidemenu-component>
-> <router-outlet><!-- The different pages will be placed here !--></router-outlet>
现在我希望能够点击navbar-component中的按钮打开sidemenu-component。
为此，我需要在侧面菜单中引用其他组件以在点击事件中注册，或者在导航栏中引用其他组件以触发侧面菜单。
我最初的想法是使用@Input()和@Output()属性来传递组件的引用。
//app-component.html
<navbar-component [parentComponent]="referenceToAppComponent" (instance)="navbarComponent"></navbar-component>
<sidemenu-component [parentComponent]="referenceToAppComponent" (instance)="sidemenuComponent"></sidemenu-component>