路由更改时从服务角度更改组件状态 这是我的代码

如何解决路由更改时从服务角度更改组件状态 这是我的代码

我有一个名为 profile 的组件。它从 user.service 获取数据。问题是当路由改变时它不会改变（点击，使用'routerLink'）；每次路由更改时，我都想从服务中引入新数据。我试过订阅可观察的路由参数。但它返回一个 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

解决方法

您很可能正在寻找第二种方法和 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，您将不必担心事后破坏流。如果您打算在 .subscribe 文件中使用 .ts，请记住正确销毁订阅，否则会导致泄漏。