Question

当时我的项目中有五个组件

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

Html for＆＃34; AppComponent＆＃34;是

<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>

现在＆＃34; HomeComponent＆＃34;和＃34; AuthComponent＆＃34;正在渲染＆＃34; router-outlet＆＃34;和＃34; AuthComponent＆＃34;有登录和注销的方法。在＆＃34; HeaderComponent＆＃34;有一个用于注销的按钮，当它点击时，我想调用＆＃34; AuthComponent＆＃34;的注销方法。现在我不能使用＆＃34;模板变量＆＃34; for＆＃34; AuthComponent＆＃34; as answered there因为它正在＆＃34; router-outlet＆＃34;中呈现。那怎么办呢？

Answer 1

您必须创建一个在HeaderComponent和AuthComponent之间共享的公共服务，并且通过此服务，您可以在HeaderComponent和AuthComponent之间进行通信。查看Parent and children communicate via a service文档以及parent-child comunication

的答案

Angular 2中的同级事件通信

1 个答案: