Angular 路由更改时从服务更改组件状态

Question

我有一个名为 profile 的组件。它从 user.service 获取数据。问题是当路线改变时它不会改变（点击，使用'routerLink'）；每次路线更改时，我都想从服务中引入新数据。我试过订阅可观察到的路由参数。但它 returns 一个 Observable 的 Observable（我相信有更好的做事方式）。

这是我的代码

// imports ...

@Component({
  ...
})
export class ProfileComponent implements OnInit {
  $user: Observable<User>;
    
  constructor(private userService: UserService, private router: Router, private route: ActivatedRoute) {}
    
  ngOnInit() {
    // UserService.getSingleUser(string); returns Observable<User>;
    
    // Method 1 (Tried. failed)
    this.$user = this.userService.getSingleUser(this.router.url.sibstring(1));
    
    // Method 2 (Tried, failed)
    this.route.params.pipe(
      map(params => params.username),
      map(username => this.userService.getSingleUser(username))
    ).subscribe(response => {
      this.$user = response;
    });
    
    
    this.$user.subscribe({
      next: console.log,
      error: console.warn
    });
  }
}

Github Gist

Answer 1

您很可能正在寻找第二种方法和 switchMap (check this 的组合以获得可视化解释）。它将允许您将运行可观察流与新的内部流交换，在本例中为 userService.getSingleUser.

this.$user = this.route.params.pipe(
  map(params => params.username),
  switchMap(username => this.userService.getSingleUser(username))
);

$user-observable 应该存储来自 userService.getSingleUser 的结果。并不是说您很可能想仔细检查 params.username 是否存在。根据您的路线结构，这可能会导致 undefined。如果您在模板中订阅了 observable，您就不必担心事后会破坏流。如果您打算在 .ts 文件中使用 .subscribe，请记住正确销毁订阅，否则会导致泄漏。

Angular 路由更改时从服务更改组件状态

Angular change component state from a service when route changes

observable

rxjs

angular-ui-router

ngrx

angular

这是我的代码