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

Question

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

...

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

<router-outlet></router-outlet>

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

如何通过'router-outlet'将数据从子视图传递回主视图？

Answer 1

要显示和隐藏按钮，您将使用* 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>

loggedIn应该是与主视图关联的组件中的布尔值。 我认为使用术语主视图和子视图分别表示您有父组件和子组件（用于身份验证）表单。如果是这种情况，请参考Component Interaction并选择最适合您的通信。

Answer 2

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

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

Here是一个与您类似的问题。