angular - Angular 2 中的兄弟事件通信

标签 angular angular2-template

当时我的项目中有五个组件,它们是

1: AppComponent (Main component)
2: AuthComponent
3: HomeComponent
4: HeaderComponent
5: FooterComponent

“AppComponent”的 Html 是

<section class="app content-area">
<ng2-slim-loading-bar  [height]="'4px'"></ng2-slim-loading-bar>
<fds-header *ngIf="_appDataService.isLoggedIn"></fds-header>
<router-outlet></router-outlet>
<fds-footer></fds-footer>

现在“HomeComponent”和“AuthComponent”正在“router-outlet”中呈现,并且“AuthComponent”具有登录和注销的方法。在“HeaderComponent”中有一个用于注销的按钮,单击它时我想调用“AuthComponent”的注销方法。现在在这里我不能使用“模板变量”作为“AuthComponent” as answered there因为它是在“router-outlet”中渲染的。那么如何才能做到呢?

最佳答案

您必须创建一项在 HeaderComponentAuthComponent 之间共享的通用服务,并且通过此服务,您可以在 HeaderComponent 之间进行通信>AuthComponent。检查Parent and children communicate via a service文档和我对 parent-child comunication 的回答

关于angular - Angular 2 中的兄弟事件通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41421746/

相关文章:

unit-testing - 对使用 RxJs 主题的 Angular2 服务进行单元测试

angular - 动态 ngTemplateOutlet 值

Angular 2 : Display different "toolbar" components depending on main navigation

angular - angular2 中的 Ng-repeat-start - 又名使用 NgFor 重复多个元素

angular - 事件未在 Angular2 的复选框内触发

angular - 在 ionic 项目中输出 XML 文件数据

javascript - 为什么以及如何使用 Angular2/Typescript 模型?

javascript - 如何在 Angular 中制作动态区域 echarts

javascript - Angular 2 使用 SharedService 将项目推送到数组以更新 UI

angularjs - Angular2 如何在 Guard 中获取目标 URL?