Question

Id未定义如果我加载页面数据。登录首页后，我应该动态获取一条记录的用户数据。

ngOnInit() {
this.loadUser(this.route.snapshot.params['id']);
}
loadUser(id) {
this.userService.getBook(id).pipe(first()).subscribe(users => {
this.loadUser(id);  
});
}

Id未定义错误

Answer 1

如果您是Angular的新手，这实际上是一件棘手的事情，所有问题都归结为“路由”事件完成且数据可用时。

非常感谢，Angular内置了一些东西，可以帮助您管理这类任务。

等待路由完成

在上述AppComponent的构造函数中，您需要订阅路由事件，并等待事件NavigationEnd。

constructor(private router: Router) {
   this.router.events.subscribe(event => {
       if (event instanceof NavigationEnd ) {
           // Parse your userId from the event.urlAfterRedirects string here
           // (note: the parse thing below is just an example, not a real function)
           const id = parse(event.urlAfterRedirects);

           this.loadData(id);
       }
   });
}

Answer 2

我将对此采取更具反应性的方法，并使用异步管道来订阅模板：

   bookById$: Observable<any>;
   constructor(
    private activeRoute: ActivatedRoute,
    private userService: UserService
   ) {
      this.bookById$ = this.activeRoute.params.pipe(
         map(params => params.id),
         switchMap((id) => this.userService.getBook(id))))
    );

，您的模板将在ng-container中使用异步管道：

<ng-container *ngIf="bookById$ | async as book">
   {{ book }}
</ng-container>

有些人可能不喜欢$遵守可观察的惯例，但我确实...太安静了。

登录角度7后动态显示单个数据

2 个答案:

等待路由完成