Angular 路由器出口覆蓋頁面

Question

我在一個更大的應用程序上工作，它有很多可重用的部分，但實際上還不是那么可重用。 我的想法是為對話 windows 創建一個模塊，它決定要顯示什么樣的對話 window 並相應地在啟動該對話的原始頁面頂部顯示所有內容。 這里的問題是這些原始頁面本身就有queryParameters，比如用戶名。 我懷疑我的問題就在那里 -> 路由器鏈接重定向到對話模塊及其相應的組件，從而搶走了必要的 queryParams 的原始組件，這導致路由器出口完全離開原始頁面而不是顯示插座中的內容。

我在 Angular 12。

下面是父組件的 .ts 文件的代碼，這是它從中獲取 queryParams 的地方：

constructor(
  private route: ActivatedRoute,
  private router: Router,
) {
  this.routeSub = this.route.queryParams.subscribe(data => {
    this.username = data.username;
  });
}

在對應的.html文件中，鏈接是這樣的：

<a [routerLink]="['./dialogue']" [queryParams]="{username: username}">123456789</a>

<router-outlet></router-outlet>

我重定向的路由是：'localhost:xxxx/original-component?username=123456789' 我重定向到的路由是：'localhost:xxxx/original-component/dialogue?username=123456789'

我希望這會顯示原始頁面路由器出口內部的組件，保留其內容的 rest，但它會完全重定向。 我已經檢查了哪些生命周期掛鈎被激活，事實上，當使用 routerLink 時，原始組件的 ngOnDestroy 被觸發。 有什么辦法可以防止這種情況發生嗎？

Answer 1

使用 params 而不是 queryParams，這將解決問題

父組件.ts

constructor(
  private route: ActivatedRoute,
  private router: Router,
) {
  this.routeSub = this.route.params.subscribe(data => {
    this.username = data.username;
  });
}

在 HTML

<a [routerLink]="['./dialogue',username]">123456789</a>

<router-outlet></router-outlet>

您還必須在路由模塊中設置帶有參數的路由

{ path: 'dialogue/:username', component: ParentComponent }