以编程方式导航时,Angular Router 旧组件保留在 dom 中

2024-01-09

角度版本:4

从登录后LoginComponent(位于public/signin路线,我想导航到TestComponent在路径中public/test。 我这样做如下:this._router.navigate(['public/test'])然后,它正确重定向,但问题是它没有删除LoginComponent来自 DOM(尽管ngOnDestroy确实被呼叫)。

值得一提的是,导航到TestComonent using <a routerLink='/public/test'>Test</a>按预期工作。

我究竟做错了什么?

应用程序.路由.ts:

const APP_ROUTES:Routes = [
  {path: 'public', loadChildren: './authentication/authentication.module#AuthenticationModule'}
];

export const APP_ROUTING:ModuleWithProviders = RouterModule.forRoot(
APP_ROUTES, {
useHash: false, enableTracing: true, initialNavigation: true});

` authentication.routing.ts(这两个组件都属于其中):

const routes: Routes = [
    {
        path: '',
        children: [
            {path: 'test', component: TestComponent},
            {path: 'signin', component: LoginComponent},
        ]
    }
];

export const routing = RouterModule.forChild(routes);

我有同样的问题。 我通过在路由之前添加它来修复:

this.zone.run(() => {
    // Your router is here
    this._router.navigate(['public/test'])
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

以编程方式导航时,Angular Router 旧组件保留在 dom 中 的相关文章

  • Angular2 - 添加新的
  • 项目 onClick 事件
  • 我使用 ngFor 迭代数组以便在列表中显示它们 但我无法在列表中添加新项目 在 Onclick 事件期间我得到一个空的 li 也许我没有链接正确的东西 指令 或者是什么 也许我使用了错误的变量 我的导出类有我的构造函数 export cl
  • Angular 2 中的动态管道

    我正在尝试创建一个组件 您可以在其中传递应用于组件内部列表的管道 通过测试和寻找答案 我发现唯一的解决方案似乎是创建类似的东西
  • 将 Angular 4 添加到 ASP.NET Core 2.0 Web 应用程序 (MVC) [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 现在 ASP NET Core 2 已发布 我已经开始在 Visual Studio 2017 中使用 ASP NET CORE 构建
  • 如何在 angular2 组件中导入 npm 包?

    我正在尝试学习 ng2 的诀窍 但依赖注入系统快要了我的命 我正在使用 ng 快速入门 https github com angular quickstart blob master README md https github com a
  • 将 Angular CLI 与 Squarespace 集成

    我很想知道是否有人能够在 Squarespace 站点中成功使用 Angular CLI 我一直在寻找这个问题的答案 但找不到解决方案 我知道您可以将自定义脚本添加到 Squarespace 站点和 或通过 CDN 添加脚本 但 Angul
  • Angular CLI - Typescript 抛出:无法读取未定义的属性“长度”

    我使用 ngserve 在 Angular 4 项目中运行 但出现错误 Cannot read property length of undefined 但我的项目中没有任何财产长度 完整的错误 Your global Angular CL
  • 在 Ionic 2 中从一个组件到另一个组件的动画过渡

    我的应用程序中有两个组件 我需要为这些页面之间的过渡设置动画 我需要翻动第 1 页 然后第 2 页就会出现 我有任何插件可以在 ionic 2 中执行此操作 任何参考 示例将不胜感激 我在用this navController setRoo
  • viewChild如何获取Angular2中添加了js的元素?

    如果一个 HTML 元素已添加到 DOM 中 例如单击按钮后 我们如何访问该元素 viewChild 看不到它 更新1 更多说明 我用过 jquery 数据表 jquery dataTablesdefineTyped 版本 https gi
  • 在角度项目中使用茉莉花进行单元测试订阅方法

    我正在尝试测试ngOnInit 具有的组件的方法subscribe method 成分 import Component OnInit from angular core import SharedDataService from serv
  • Angular 2 形式 + OnPush

    我正在编写一个 Angular 2 应用程序 出于性能原因 我尝试在任何地方使用 ChangeDetectionStrategy OnPush 我有一个复杂的组件 需要 OnPush 才能顺利工作 其中包含另一个显示表单的组件 使用 For
  • 当我没有执行任何数据更改时,为什么会收到 NG0901 错误?

    在下面的代码段中 我正在迭代 ardene section1 items 我已将此数组记录到控制台以验证它确实存在 BEFORE FOR LOOP 测试会打印到屏幕上 但 INSIDE FOR LOOP 测试不会打印 我得到了 NG0901
  • 具有动态名称的 Angular Material 2 日期选择器

    我正在尝试实现具有动态名称的日期选择器组件 我正在使用 Angular 4 开发基于 Angular Material 2 的项目 这是我的实现
  • Angular Firebase 电子邮件验证验证后错误

    我正在使用电子邮件和密码设置授权功能 一切正常 但当我创建新用户时 应用程序会发送一封带有验证链接的电子邮件 验证电子邮件地址后 我想登录 以便返回登录表单 emial verified 保持在 假 状态 在我硬重新加载页面后 这是 真 但
  • 是否可以使用纯 css 禁用 mat-tab 动画

    我想禁用 Angular Material mat tab 动画 内容滑入到位时发生的动画 我知道可以使用 disabled 属性 但我想知道是否可以使用纯 css 达到相同的效果 EDIT 我们的用户体验团队希望从材质选项卡中删除幻灯片动
  • 模拟 ngrx/store

    这是关于 Angular 2 官方版本的 我知道单元测试在 beta RC 和正式版本之间发生了巨大的变化 当 ngrx store 用作构造函数中的参数时 在单元测试中模拟 ngrx store 的好方法是什么 这并不像嘲笑服务那么简单
  • Highcharts / Highmaps with Angular - 无法运行演示

    我正在发现 Highcharts Highmaps 现在 我想使用在我的机器上重现一些演示示例角6 但我无法让它发挥作用 官方的 JS 示例在这里 https www highcharts com maps demo map drilldo
  • Angular 2 组件:子对子通信

    我的 Angular 2 应用程序中有三个组件 C0 C1 和 C2 第一个 C0 表示一个 html 模板 具有多个子组件 ui 元素 现在 如果有人点击C1 中的按钮 菜单 我怎样才能通知C2 日历 关于那件事 我尝试了一些例子组件通讯
  • Angular 反应式表单:使用单个 formControlName 同步多个输入

    我正在建造一个反应形式 https angular io guide reactive forms在 Angular 11 中 它分为多个 div 项目所有者希望在每个 div 中进行一些重复输入 以便用户可以编辑某个字段 A 的输入 并且
  • 如何按顺序使用 RxJS 可观察量?

    事情是这样的 我有一个 HTTP get 请求 它返回一个 JSON 对象列表 我使用 RxJS 订阅接收该列表的数据 现在 对于该列表中的每个对象 我想执行另一个 HTTP 请求 然后将该请求的结果放入数组中 到目前为止 我已经能够做到这
  • 类型错误:无法读取未定义的属性“post”

    嗨 我只想使用一个简单的功能 http post 将我的日期发布到页面 我希望服务器能够获取我发布的日期 import Component OnInit from angular core import MarginServcies fro

随机推荐

  • AOP 围绕外部库的重写方法?

    我正在寻找以下问题的实用解决方案 外部库提供组件作为基类 自定义组件是通过扩展这些基类来创建的 当实现抛出未处理的异常时 基类就会中断 基类源代码不可用 只有一个二进制罐子 我正在寻找的是一个通用的 AOP 错误处理建议 它将包装每个方法的
  • 如何使用 React 前端将 favicon 添加到 django 应用程序

    我正在构建一个带有 React 前端的 Django 应用程序 使用 React create app 构建 我无法让图标出现在生产中 我正在使用 Django 2 10 0 当我构建 React 应用程序时 构建输出文件将放在 asset
  • Visual Studio 2013 与 2010 项目兼容吗?

    VS2012 可以打开 VS2010 项目并使它们处于可在 VS2010 中使用的状态 VS2013有同样的功能吗 如果允许 Visual Studio 自动升级项目 则可以在 Visual Studio 2013 Visual Studi
  • 从 Android 应用程序登录网页

    我正在努力做到这一点 我真的需要有经验的朋友的帮助 带有 2 个文本框的应用程序 一份用于用户名 一份用于密码 登录按钮 当用户按下按钮时 登录信息将发送到网页 m bonbon hr 并在浏览器中打开该网页 首次登录后 登录信息将被保存
  • 找不到接口 java.util.List Rest API Spring boot 的主要或默认构造函数

    我将请求正文传递给邮递员上的 POST 请求 类似于以下内容 name Mars artifacts elements name carbon amount 0 5 measurement g typeName typeA elements
  • 使用 ShouldBeEquivalentTo 并处理不同的名称

    我想做一个映射器测试 将数据库模型映射到 dto 数据库模型中有 class Order long Id 但在 Dto 上 同一个字段被命名为 class OrderDto long OrderId 使用 ShouldBeEquivalen
  • PayPal 和 Parse 冲突

    尝试使用 PayPal iOS SDK 使其能够仅与 Paypal 集成一起工作 但是当我尝试添加任何解析所需的框架 例如 Parse framework Boltz framework 和 ParseFacebookUtils frame
  • 使用宏将 import 语句粘贴到 thunk 前面

    触发于这个问题 https stackoverflow com questions 18535356 multiple late initialisation 我想知道是否可以编写一个 def macro 来实现结果 import scal
  • 对于 OpenXML Excel 文档,MemoryStream 为空

    我通常会使用 ClosedXML 生成 Excel 文件 核心项目迫使我只使用 OpenXML 将下载生成的 Excel 文件 我遇到一个问题 即提供给 SpreadsheetDocument 的内存流为空 我尝试了多种方法来生成流 下面的
  • node.js:在成功验证 get 请求后提供文件(特别是 apk)

    好吧 我正在尝试在成功验证 get 请求后使用 node js 提供 apk 文件 为此 我使用以下形式的 api 调用 GET apk username user token a token goes here 请注意 实际的身份验证是通
  • 使用 Laravel 下订单后减少数据库中的产品数量

    我在网站上有购物车 到目前为止一切正常 现在 我正在尝试为管理员可以在后端添加的每种产品进行数量 已经完成 以及当客户订购产品以减少数据库中的数量时 到目前为止 管理面板已准备就绪 可以向保存在数据库中的产品添加数量 这是我的购物车提交控制
  • 在 Ubuntu 10.04 上编译时未声明 PATH_MAX

    我正在尝试在 Ubuntu 10 04 中为 8 04 编译 C 程序 它失败了 因为我们已经使用了PATH MAX以及其他应该定义的常量limits h 根据各种资源 它应该是 POSIX 兼容 C 库的一部分 这是 Ubuntu 10
  • 单元测试双向 EF 关系

    我正在做一个小型实践项目来提高我的单元测试技能 我正在使用实体框架代码优先 我正在使用 FakeDBSet 它非常适合简单的实体列表 当实体树返回时 事情就不太好了 特别是 不会维护两种方式的关系 因为这是实体框架魔法的一部分 我有两节课
  • 安装后如何添加更多Qt版本?

    我已经安装了开源 Qt 5 5 0 设置如下 Kits Desktop Qt 5 4 2 MSVC2013 64bit2 Desktop Qt 5 5 0 MSVC2013 64bit Qt 版本 Qt 5 4 2 MSVC2013 64b
  • Rails - image.png 未预编译

    我正在尝试在 Amazon 的 EC2 服务器上部署 Web 应用程序 并且我将代码放在服务器上 一切看起来都正常 但是当我进入主页时 我收到一条 500 错误消息 并且production log文件给我以下错误 ActionView T
  • iPhone(SDK 2.2):在不主动使用 AVFoundation 播放音乐时调整播放音量?

    所以我有一个可以播放许多简短声音剪辑的应用程序 我需要知道声音何时播放完毕 并且我需要使用 mp3 因此我使用 AVFoundation 进行声音播放 当正在播放声音并且用户使用硬件音量按钮时 播放音量会发生变化 问题是 该应用程序不会不断
  • 在 Windows 8 应用程序中以编程方式使用 SSL 证书

    我需要这方面的帮助 我们的后端由自签名证书保护 我们称之为 OurMegaCool Certificate cer 因此 我们已使用以下命令将此证书导入到我们的开发人员机器中证书管理器MSC 现在我们可以使用以下代码从后端检索数据 asyn
  • 截取 BlackBerry 中当前屏幕的屏幕截图

    是否可以在 BlackBerry 应用程序中截取当前屏幕的屏幕截图 我的屏幕上有一个按钮 当我单击该按钮时 我想发送一封包含当前屏幕截图的电子邮件 您可以使用以下方法获取显示屏幕的屏幕截图 public static Bitmap getS
  • mvc 3会话和authorizeAttribute

    我的网站对所有人开放 但我有一个控制器 其中有某种方法 只有具有用户名和密码的管理员才能输入 我正在拯救布尔IsManager in a session 我想使用授权属性来阻止任何人IsManager false 首先定义一个ActionF
  • 以编程方式导航时,Angular Router 旧组件保留在 dom 中

    角度版本 4 从登录后LoginComponent 位于public signin路线 我想导航到TestComponent在路径中public test 我这样做如下 this router navigate public test 然后