Angular 如何检测角度传感器中的模板是否发生错误？

我正在angular中处理全局错误处理程序，我的项目的要求也是显示一个关于错误的模式窗口，以便用户可以报告是否有错误，我们可以修复它。除非模板中发生错误，否则它可以正常工作。在这种情况下，更改检测基本上被破坏，它不更新绑定，因此“材质模式”对话框显示为空。我试着在谷歌上搜索并检查ngDebugContext中的所有可用数据，但什么也回答不了我的问题。重点是，若模板中发生错误（或者我们可以知道变更检测是否通常失效），那个么我只会显示警报。作为最后的解决方案，我将使用静态模板创建模态组件，其中文本将被硬编码并显示，以防出现任何未处理的错误。

最后，我们解决了这一问题，使用更改检测被破坏的事实，并使用角度绑定在模态中创建了一个始终隐藏的元素

[hidden]=“true”

，但随着变化检测被破坏，它将被忽略，所以它里面的文本将被显示，这样我们甚至可以在应用程序真正崩溃时显示一条非常具体的消息

<!-- This part is fallback for unhandled error which happens during change detection in the template -->
    <div class='crash-error-heading' [hidden]='true'>
      <h2>Something went really wrong</h2>
    </div>
<!---->

出了点问题

您可以在全局级别定义自定义错误处理程序，如下所示：

自定义错误处理程序.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())
  }
}

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

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

应用程序模块.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())
  }
}

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>

您会注意到，

CustomErrorHandler

捕获了该错误

但总的来说，我不建议你这么做。这必须得到确认，但也许AOT可以捕捉到，如果不能捕捉到，你应该编写一些集成或E2E测试，无论如何都可以捕捉到

下面是stackblitz的一个工作示例：

---

很抱歉，也许我的问题对您来说不够清楚，但这不是我要问的。自定义错误处理程序是我们已经使用的。它很好地捕捉到了错误。问题是，如果模板中发生错误，更改检测就会消失（它仍然被错误处理和通过服务传递的错误捕获）。但是模板中的绑定不再更新。