路由后重新加載Angular頁面數據

Question

我在下面用Nebular設計的照片上有一個聊天框頁面：聊天框照片

當我單擊列表名稱之一 (2) 時，URL ID (1) 已更改，但該 ID 的數據未加載。

注意，我創建了一個名為chatting的模塊，其中包含用戶的姓名列表，然后是一個名為message的組件，其中包含聊天框。

chatting.component.html

<li *ngFor="let x of userdata  | filter: Search" >
            <a [routerLink]="['/message/', x.id]" href="">

chatting-routing.module.ts

children:[
  {
    path:'message/:id',
    component:MessageComponent
  },

message.component.ts

getdata()
{
  this.id = this.route.snapshot.params['id'];

  this.cr.getuserbyid(this.id).subscribe(res=>{
    this.tabs=res;
    this.username=this.tabs.firstName;
  })


}

注意：我嘗試使用location.reload()和window.location.reload()但它不起作用

Answer 1

您可以在組件中訂閱路由或激活路由，例如 ngOnit。 也許是這樣的：

  ngOnInit(): void {
    this.route.paramMap.pipe(
      switchMap((params)=>{
        return this.cr.getuserbyid(params.get('id'));
    })).subscribe(res=>{
      this.tabs=res;
      this.username=this.tabs.firstName;
    })
}

在上面的示例中，您訂閱了激活的Route 服務，該服務將檢測路由更改。 當這個 observable 發出時，您將 output 從中傳遞到您的 getuserId observable 中。 如果外部 observable (route/activatedRoute) 發出一個新值，switchMap 將取消內部 observable (getuserbyid)。

您可以使用異步 pipe 在模板中直接訂閱，而不是使用這些組件變量選項卡和用戶名。