Question

我是棱角分明2的新手所以如果我的术语关闭，请原谅我。我有一个使用angular 2编写的应用程序，我似乎无法掌握如何在组件之间触发和处理事件的概念。

该应用有一个导航侧边栏，其中包含一个菜单和其他已登录的用户特定数据。当用户未登录时，侧边栏应为空并且用户登录，侧边栏应加载相应的菜单和用户特定数据（菜单根据用户的安全级别更改）。

我按预期加载了数据，但我似乎无法弄清楚如何在不强制完全浏览器刷新的情况下告诉侧边栏加载数据。

页面结构如下：

标题

左侧边栏

主要内容 - ＆gt;路由组件加载的地方

页脚

我需要Main Content组件来引发事件，而我需要左侧边栏组件来订阅该事件并执行一些工作来加载数据。

一般来说，数据是在登录服务完成后加载的，并将控制权交还给调用服务方法的登录组件，在用户注销之前不会再次触摸。

有什么建议吗？

Answer 1

创建一个LoginData服务并在您的引导程序中提供它。该服务将包含以下字段：

loggedIn$: Subject<boolean> = new BehavioralSubject<boolean>(false);
loginData$: Subject<any> = new BehavioralSubject<any>({}); // in case you want to pass specific data

loginSuccessful(data: any): void {
  this.loggedIn$.next(true);
  this.loginData$.next(data);
}

然后，在您的NavbarComponent中，注入登录服务：

constructor(private loginSvc: LoginData){}

并在您的html中使用服务数据，例如：

<button type="button" (click)="..." *ngIf="loginSvc.loggedIn$ | async">my profile</button>

或者如果您想使用特定数据：

 <span *ngIf="loginSvc.loggedIn$ | async">user {{(logindSvc.loginData$ | async).name}}</span>

现在在您的登录处理程序中执行：

this.http.get('/login', JSON.stringify(loginPayload))
  .map(response => response.json())
  .subscribe(loginData => this.loginSvc.loginSuccessful(loginData));

Angular2一个组件触发事件，另一个订阅并执行一些任务

1 个答案: