如何订阅已解决的路线数据的更改 - Angular 2

时间:2017-08-08 16:58:36

标签: angular angular2-routing resolveurl

我有一个组件可以在加载时解析路径中的数据。

我的挑战是,只要组件呈现的数据发生变化,组件就不会更新,除非我刷新页面,或切换到另一条路线并返回。

我理解这是因为只有在访问路线时才能解析数据。

有没有解决方法,以便我可以订阅已解决数据的更改?

以下是相关的代码块。

routes.ts

{
    path: 'user-information',
    component: UserInformationComponent,
    resolve: { userData: UserDataResolver }
}

resolver.ts

@Injectable()
export class UserDataResolver implements Resolve<any> {

  constructor(
    private userService: UserService
  ) {};

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IUser> {
   return this.userService.currentUser().first();
  };
};

user.component.ts

loadUserData() {
  this.route.data.subscribe(
    data  => this.userData = data,
    error => this.updateForm.disable()
  );
};

1 个答案:

答案 0 :(得分:1)

解析器只允许返回单个值或对象。您应该能够将this.userService.currentUser()包装在Promise(或其他Observable)中并返回:

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IUser> {
 return Promise.resolve(this.userService.currentUser());
};

然后你应该能够补水&#39;您在组件代码中的Observable:

loadUserData() {
  this.route.data
    .mergeMap(data => userData)
    .subscribe(
      userData => this.userData = userData,
      error => this.updateForm.disable()
    );
  };
}

我无法马上测试,但我确信这有效。