Angular2 - 路由错误

【问题标题】：Angular2 - Error with RoutingAngular2 - 路由错误
【发布时间】：2017-10-31 09:55:28
【问题描述】：

我继承了一个 Angular2 应用程序。这是一个定制的 IT 票务系统。 我们有一个主菜单（main.component），用户可以在其中看到他们分配的工单列表。他们单击链接将他们带到该票的详细信息页面。在工单页面 (ticket.component) 上，一旦进行更改，用户单击“保存并退出”。然后，这将向 RESTful API 发送一个发布请求 - 包含有关票证的许多属性。这是通过自定义服务 (ticketService.SaveTicket) 完成的。这将返回一个订阅。发布数据完成后，我希望应用程序导航回主菜单。下面是“保存并退出”按钮的点击事件附带的方法

public saveClick(): void {
    var ticketData =
      {
        'ID': this.id,
        'AssignedTo': this.AssignedToSelect,
        'Status': this.StatusSelected,
        'Category': this.CategorySelected,
        'UsersAffected': this.AffectedSelected,
        'AdviseWhenCompleted': this.AdviseToSelect
      };
    this.savingTicket = true;
    let that = this;

    this.ticketService.SaveTicket(ticketData).subscribe(x => {
      this.savingTicket = false;
      this.router.navigate(['main']);
    }, err => {
      debugger;
      swal('Aw no!', 'An error has occurred saving this ticket', 'error');
      this.savingTicket = false;
    });
  }

每当用户点击此按钮时，控制台中就会出现以下错误：

EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:3000/app/components/ticket/ticket.component.html:28:24 caused by: Cannot read property 'parentElement' of null

显然由于该错误，应用无法导航到“main”。浏览器窗口也完全空白（表示 JS 错误）。

说实话，我不知道它指的是哪个 parentElement。我认为罪魁祸首在于 this.router.Navigate 行，因为当我将其注释掉时，错误不会出现并且浏览器不会变为空白。

有没有人知道为什么会发生这种情况？任何建议都非常感谢！

编辑：下面是 ticket.component.html 的 sn-p - 从第 27 行开始

<td style="text-align: right; width: 70%;">
    <span class="selectAutoResponse">Select Auto Repsonse:</span>
    <kendo-combobox [data]="autoResponse" [placeholder]="'- Select Value -'" [value]="selectedAutoResponse" [textField]="'ValueText'" [valueField]="'ID'" style="width: 350px" (valueChange)="handleAutoResponseChange($event)"></kendo-combobox>
</td>

编辑：下面是控制台错误的完整摘录：

:3000/node_modules/@angular/core/bundles/core.umd.js:3064 EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:3000/app/components/ticket/ticket.component.html:28:24 caused by: Cannot read property 'parentElement' of null
Error: Error in http://localhost:3000/app/components/ticket/ticket.component.html:28:24 caused by: Cannot read property 'parentElement' of null
    at ViewWrappedError.ZoneAwareError (http://localhost:3000/node_modules/zone.js/dist/zone.js:992:33)
    at ViewWrappedError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1239:20)
    at ViewWrappedError.WrappedError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1297:20)
    at new ViewWrappedError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6167:20)
    at View_TicketComponent3.DebugAppView._rethrowWithContext (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12385:27)
    at View_TicketComponent3.DebugAppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12344:22)
    at ViewContainer.destroyNestedViews (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12476:41)
    at View_TicketComponent1.destroyInternal (/AppModule/TicketComponent/component.ngfactory.js:2598:15)
    at View_TicketComponent1.AppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:11986:18)
    at View_TicketComponent1.DebugAppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12341:42)
    at ViewContainer.destroyNestedViews (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12476:41)
    at CompiledTemplate.proxyViewClass.View_TicketComponent0.destroyInternal (/AppModule/TicketComponent/component.ngfactory.js:2907:14)
    at CompiledTemplate.proxyViewClass.AppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:11986:18)
    at CompiledTemplate.proxyViewClass.DebugAppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12341:42)
    at CompiledTemplate.proxyViewClass.View_TicketComponent_Host0.destroyInternal (/AppModule/TicketComponent/host.ngfactory.js:33:19)
ErrorHandler.handleError @ :3000/node_modules/@angular/core/bundles/core.umd.js:3064
:3000/node_modules/@angular/core/bundles/core.umd.js:3069 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ :3000/node_modules/@angular/core/bundles/core.umd.js:3069
:3000/node_modules/@angular/core/bundles/core.umd.js:3070 Error: Uncaught (in promise): Error: Error in http://localhost:3000/app/components/ticket/ticket.component.html:28:24 caused by: Cannot read property 'parentElement' of null
Error: Error in http://localhost:3000/app/components/ticket/ticket.component.html:28:24 caused by: Cannot read property 'parentElement' of null
    at ViewWrappedError.ZoneAwareError (http://localhost:3000/node_modules/zone.js/dist/zone.js:992:33)
    at ViewWrappedError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1239:20)
    at ViewWrappedError.WrappedError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1297:20)
    at new ViewWrappedError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6167:20)
    at View_TicketComponent3.DebugAppView._rethrowWithContext (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12385:27)
    at View_TicketComponent3.DebugAppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12344:22)
    at ViewContainer.destroyNestedViews (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12476:41)
    at View_TicketComponent1.destroyInternal (/AppModule/TicketComponent/component.ngfactory.js:2598:15)
    at View_TicketComponent1.AppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:11986:18)
    at View_TicketComponent1.DebugAppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12341:42)
    at ViewContainer.destroyNestedViews (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12476:41)
    at CompiledTemplate.proxyViewClass.View_TicketComponent0.destroyInternal (/AppModule/TicketComponent/component.ngfactory.js:2907:14)
    at CompiledTemplate.proxyViewClass.AppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:11986:18)
    at CompiledTemplate.proxyViewClass.DebugAppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12341:42)
    at CompiledTemplate.proxyViewClass.View_TicketComponent_Host0.destroyInternal (/AppModule/TicketComponent/host.ngfactory.js:33:19)
    at resolvePromise (http://localhost:3000/node_modules/zone.js/dist/zone.js:665:31) [angular]
    at resolvePromise (http://localhost:3000/node_modules/zone.js/dist/zone.js:636:17) [angular]
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:713:17 [angular]
    at Object.onInvokeTask (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3971:41) [angular]
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:366:36) [angular]
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:166:47) [<root> => angular]
    at drainMicroTaskQueue (http://localhost:3000/node_modules/zone.js/dist/zone.js:546:35) [<root>]
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:25) [<root>]
ErrorHandler.handleError @ :3000/node_modules/@angular/core/bundles/core.umd.js:3070
zone.js:522 Unhandled Promise rejection: Error in http://localhost:3000/app/components/ticket/ticket.component.html:28:24 caused by: Cannot read property 'parentElement' of null ; Zone: angular ; Task: Promise.then ; Value: ViewWrappedError Error: Error in http://localhost:3000/app/components/ticket/ticket.component.html:28:24 caused by: Cannot read property 'parentElement' of null
    at ViewWrappedError.ZoneAwareError (http://localhost:3000/node_modules/zone.js/dist/zone.js:992:33)
    at ViewWrappedError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1239:20)
    at ViewWrappedError.WrappedError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1297:20)
    at new ViewWrappedError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6167:20)
    at View_TicketComponent3.DebugAppView._rethrowWithContext (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12385:27)
    at View_TicketComponent3.DebugAppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12344:22)
    at ViewContainer.destroyNestedViews (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12476:41)
    at View_TicketComponent1.destroyInternal (/AppModule/TicketComponent/component.ngfactory.js:2598:15)
    at View_TicketComponent1.AppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:11986:18)
    at View_TicketComponent1.DebugAppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12341:42)
    at ViewContainer.destroyNestedViews (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12476:41)
    at CompiledTemplate.proxyViewClass.View_TicketComponent0.destroyInternal (/AppModule/TicketComponent/component.ngfactory.js:2907:14)
    at CompiledTemplate.proxyViewClass.AppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:11986:18)
    at CompiledTemplate.proxyViewClass.DebugAppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12341:42)
    at CompiledTemplate.proxyViewClass.View_TicketComponent_Host0.destroyInternal (/AppModule/TicketComponent/host.ngfactory.js:33:19)
consoleError @ zone.js:522
zone.js:524 ZoneAwareError

【问题讨论】：

  • 能否也显示文件ticket.component.html？尝试向我们展示此错误似乎弹出的区域（可能是第 28 行）。
  • 感谢@DanielH.J。已更新问题
  • 嗯...我现在看不出 html 有什么问题。让我们试试这个...说如果你注释掉this.router.navigate，当你调用ticketService.SaveTicket(ticketData)时，它是否保存成功并调用成功回调，弹出错误并调用错误回调，或者抛出异常并且整个 JavaScript 中断？如果可能，还显示控制台上出现的任何其他错误:)
  • 嗨@DanielH.J.，似乎调用了成功回调（有或没有注释掉导航线） - 我通过在它之前直接粘贴一个调试器命令来确认这一点 - 直到那个点在代码中，没有错误。错误回调也正确触发，因为我在单击保存和退出之前关闭了 API，从而迫使错误发生。整个 javascript 只有在到达 this.router.navigate 时才会中断。话虽如此，我刚刚在控制台上发现了另一个错误——这可能会提供更多线索？将编辑我原来的问题
  • Ben 已经给出了答案，我认为这绝对是可能的。您是否能够从浏览器窗口访问“主”路线而不会出现任何错误？

标签： angular angular-router


【解决方案1】：

目前尚不清楚（根据您发布的代码），但我敢打赌，您的问题来自“kendo-combobox”在保存票证后未能正确初始化。查看该组件的内部并确保它的默认模型设置为空模型（通常在 ngInit 或其构造函数中。）

【讨论】：

  • 谢谢本，我认为问题更大（或性质不同） - 我注释掉了 kendo-combobox 并发现它产生了相同的错误，但在不同的行（第 13 行）。第 13 行是
    - kendo-combobox 位于该 div 内。但是，对象ticketInfo 绝对不是空的，因为我已经在导航函数之前使用调试器语句确认（因此ngIf 的结果应该产生一个值或true）。这个 ngIf 只在 API 的结果返回数据后才呈现 HTML。会是这个原因吗？
  • 在这种情况下，当您执行导航回主组件时，可能某些对象为空。不调用导航时不会出错？
  • 正确，注释掉导航功能时没有错误
  • 这意味着主组件中没有正确设置。
猜你喜欢
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode