javascript - 如何以角度从另一个组件销毁活动路由组件
问题描述
我有一个场景。我的 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 工作
请找到我的代码。
第一个组件:
解决方案
我想这就是角度路由的工作原理。当您尝试导航到您当前所在的相同 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
}
})
}
推荐阅读
- python - tf.signal.stft 返回 -inf
- typescript - 勇敢的浏览器卡住了,当我访问 /register 路由时,它会将我重定向到动态路由
- javascript - 访问道具时未获得正确的数据
- python - 在数据框中查找浮点值并按列范围替换
- python - 嗨,我正在尝试在 VScode 中导入/安装请求和漂亮的汤,但以下不起作用
- python - 多索引数据框熊猫中负值的括号
- java - Java中的替换密码。仅在以大写形式编写时进行编码
- javascript - 函数定义后有冒号的地方是什么语法?
- go - 结果在 TDengine go 连接器的协程使用中不匹配
- javascript - 如何在 devextreme 数据网格中添加下拉列