如何检测角度模板中是否发生错误?

时间:2018-05-24 10:27:55

标签: angular angular-errorhandler

我正在处理角度的全局错误处理程序,我的项目的要求也是显示错误的模态窗口,以便用户可以报告是否有错误,我们可以修复它。它工作正常,除非模板中发生错误。在这种情况下,更改检测基本上没有更新绑定,因此材料模态对话框显示为空。我试图谷歌并检查ngDebugContext中的所有可用数据,但没有什么能回答我的问题。重点是,如果模板中发生错误(或者我们可以知道更改检测通常是否已死),那么我只会显示警告。作为最后的解决方案,我将使用静态模板创建模态组件,其中文本将被硬编码并在出现任何未处理的错误时显示。

2 个答案:

答案 0 :(得分:0)

最后我们通过使用角度绑定10000来改变检测被破坏并在模态中创建一个始终隐藏的元素的事实来解决它,但是当更改检测被打破时它将被忽略,因此文本内部它将被显示,这样我们甚至可以在应用程序真正崩溃时显示非常具体的消息

q = 100... # zeroes are in terms of number of decimals
for i in range (1*(q), 3.5*(q), n*q) : #This is the logical term for Python
   print(i/q)

答案 1 :(得分:0)

您可以在全局级别定义自定义错误处理程序,如:

自定义误差-handler.service.ts

import { ErrorHandler, Injectable } from '@angular/core';

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
  constructor() { }

  handleError(error) {
    // your custom error handling logic
    console.log('GLOBAL ERROR CAUGHT: ', error.toString())
  }
}

<强> app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { CustomErrorHandler } from './custom-error-handler.service';

@NgModule({
  // ...
  providers: [
    {
      provide: ErrorHandler,
      useClass: CustomErrorHandler
    }
  ],
  // ...
})
export class AppModule { }

但你不能用变量来捕捉变量。这是有道理的。如果您采用以下组件:

<强> TS

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';

  triggerError() {
    throw new Error('Some error');
  }
}

<强> HTML

<!-- variable is defined as `name` but typo -->
<p>
  Name: {{ nam || 'Default name' }}
</p>

<button (click)="triggerError()">Trigger error caught by global/custom error handler</button>

这里我们得到了渲染视图“默认名称”,因为nam只是未定义。这不是一个实际的错误。尝试在浏览器控制台或nodejs上下文中编写undefined,很好。这不是错误。

也就是说,如果您尝试访问未在对象上定义的属性,则会出现错误。因此,如果您将HTML更新为:

<p>
  Name: {{ nam.someUndefinedProp || 'Default name' }}
</p>

您会注意到CustomErrorHandler发现了该错误。

但总的来说,我不建议你那样做。它必须得到确认,但也许AOT可以捕获它,如果不是,你应该只写一些集成或E2E测试,无论如何,这将抓住它。

这是关于stackblitz的一个工作示例:

https://stackblitz.com/edit/angular-sipcki?file=src%2Fapp%2Fapp.component.html