如何在Angular 2中将数据从子视图传递到主视图？

我在主视图上有两个按钮：登录和注销。最初仅显示登录按钮：

登录
注销

登录按钮将显示一个子视图，一旦用户在那里通过身份验证，我想将结果传递回主视图，如果用户通过身份验证，我想隐藏“登录”按钮并显示“注销”按钮

---

如何通过“路由器出口”将数据从子视图传回主视图？

要显示和隐藏按钮，您将使用*ngif structural指令，如：

<button *ngIf="!loggedIn" type="button" routerLink="/login" routerLinkActive="active" class="btn btn-info">Login</button>
<button *ngIf="loggedIn" type="button" routerLink="/showlist" routerLinkActive="active" class="btn btn-info" (click)="logout()">Logout</button>

登录
注销

loggedIn应该是与主视图关联的组件中的布尔值。

---

我假设术语“主视图”和“子视图”的意思是分别有一个父组件和一个子组件（用于身份验证）表单。如果是这种情况，请参考并选择最适合您的通信方式。

您需要使用服务在组件之间共享信息。一旦用户通过身份验证，您将希望在此服务中设置一个属性，指示该用户已通过身份验证

完成后，您可以引用此服务以确定是否应使用*ngIf显示或隐藏某些内容

---

回答的问题与您的问题类似。

使用公共服务。阅读本文，我相信您会发现一些适合您的案例（）是的，我已经创建了一个共享数据服务，由两个组件（主视图和子视图）引用，它工作得很好。谢谢你的帮助！

<button *ngIf="!loggedIn" type="button" routerLink="/login" routerLinkActive="active" class="btn btn-info">Login</button>
<button *ngIf="loggedIn" type="button" routerLink="/showlist" routerLinkActive="active" class="btn btn-info" (click)="logout()">Logout</button>