处理涉及多个组件的事件有哪些可能性？

我正在开发一个小型项目，我正在编写一个移动的第一个应用程序。为此，我打算在屏幕顶部有一个导航栏，在左侧有一个菜单滑动屏幕。我希望这些组件在每个页面/视图上都可用。处理涉及多个组件的事件有哪些可能性？

我目前的架构是这样的：

<app-component> 
-> <navbar-component> 
-> <sidemenu-component> 
-> <router-outlet><!-- The different pages will be placed here !--></router-outlet>

现在我希望能够在navbar-component点击一个按钮，打开sidemenu-component。

为此，我需要在sidemenu注册点击事件或在导航栏中触发sidemenu的其他组件的参考。

我最初的想法是使用@Input()和@Output()属性来传递组件的引用。

//app-component.html 
<navbar-component [parentComponent]="referenceToAppComponent" (instance)="navbarComponent"></navbar-component> 
<sidemenu-component [parentComponent]="referenceToAppComponent" (instance)="sidemenuComponent"></sidemenu-component>

来源

2017-08-12 Techadler

不，你不需要组件的引用。只需在这两个组件之间共享一个服务，并从这个共享服务中发出事件（使用可观察事件）。 https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service –

你可能会考虑使用路由器来做到这一点。您可以使用命名的插座，并将菜单的开头显示为路线本身，并通过导航栏导航到路线 –

输入，输出的API可当你有父/子组件使用。所以使用Input,父母将数据发送给孩子，并使用Output，孩子可以发送数据给父母。

现在在这里，似乎你处理兄弟组件（没有父/子方案）。对于这种类型的兄弟情况，可以使用共享服务。
但请确保使用SINGLEET SHARED SERVICE。
Singleton共享服务将在整个应用程序中共享一个服务实例，因此您可以在兄弟组件之间进行通信。

来源

2017-08-12 10:52:17 micronyks

处理涉及多个组件的事件有哪些可能性？

回答

相关问题