如何以角度从另一个组件销毁活动路由组件答案

【问题标题】：How to Destroy Active Routing Component from another component in angular如何以角度从另一个组件销毁活动路由组件
【发布时间】：2023-04-10 14:25:01
【问题描述】：

我有一个场景。我的 Angular 应用程序有 4 个组件。他们是：应用组件第一个组件第二成分第三组件。

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 工作

请查找我的代码。

第一个组件：

第二个组件：

第三部分：

【问题讨论】：

请勿发代码图片

标签： javascript html angular typescript

【解决方案1】：

我想这就是角度路由的工作原理。当您尝试导航到您当前所在的相同 URL 时，默认情况下 Angular 忽略导航。无论如何，您可以在角度路由模块上指定一个 ExtraOptions 对象，如下所述：

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

link to angular documentation

您可能会认为通过提供此选项，角度会重置组件的状态（或重新加载页面），但这也不是您想要的。角度路由主要不会重新实例化您的组件，也不必这样做。如果您想在导航到当前 URL 时做一些特殊的工作，一种解决方法是订阅路由器事件。像这样：

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

【讨论】：