如何以角度從另一個組件銷毀活動路由組件

Question

我有一個場景。 我的 Angular 應用程序有 4 個組件。 它們是：AppComponent FirstComponent SecondComponent ThirdComponent。

FirstComponent & Third Component 在 app-routing.module.ts 中配置

現在描述場景：當我在瀏覽器中的 localhost:4200/first url 中時，我得到了第一個組件。 第一個具有單個按鈕的 Html 組件。如下所示

當我單擊按鈕時，ts 文件中的方法會切換一個布爾值，並根據布爾變量觸發第二個組件。 第二個組件有一個文本框和一個按鈕。如下所示

現在，當我單擊文本框中的一些文本並單擊按鈕時，應用程序將重定向到第三個組件，並且 url 是 localhost:4200/third。 像下面

現在第三個組件也有一個按鈕。 單擊該按鈕將切換 1 個布爾值，該值將呈現第二個組件。 像下面

現在，當我輸入一些名稱並點擊第二個按鈕時，然后根據第二個組件 ts 文件它應該重定向到第三個組件，該組件應該具有單個按鈕名稱第三個組件。 （作為第三個組件的初始化，布爾值默認為 false，因此用戶不希望在 localhost:4200/third 中看到第二個組件）

但是 router.navigate 不工作。 如何使路由從 second.component.ts 工作

請找到我的代碼。

第一個組件：

第二個組件：

第三部分：

Answer 1

我想這就是角度路由的工作原理。 當您嘗試導航到您當前所在的相同 URL 時，默認情況下 Angular 會忽略導航。 無論如何，您可以在角度路由模塊上指定一個 ExtraOptions 對象，如下所述：

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

鏈接到角度文檔

您可能會認為通過提供此選項，角度會重置組件的狀態（或重新加載頁面），但這也不是您想要的。 角度路由主要不會重新實例化您的組件，也不必這樣做。 如果您想在導航到當前 URL 時做一些特殊的工作，一種解決方法是訂閱路由器事件。 像這樣的東西：

  ngOnInit(): void {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // do your checks and call your special function/method
      }
    })
  }