如何检测模板在角度上是否发生错误？
我正在致力于全局错误处理程序的角度和我的项目的要求也是显示一个模式窗口的错误，以便用户可以报告，如果有什么问题，我们可以修复它。除非模板中出现错误，否则它可以正常工作。在不更新绑定的情况下，更改检测基本上被破坏，因此Material对话框显示为空。我试着用谷歌搜索ngDebugContext中的所有可用数据，但是没有什么能回答我的问题。要点是，如果模板中出现错误(或者我们可以知道更改检测是否通常是死的)，那么我就会显示警报。作为最后的解决方案，我将创建带有静态模板的模态组件，其中文本将被硬编码，并在发生任何未处理的错误时显示。
回答 2
Stack Overflow用户
发布于 2018-05-24 11:21:42
最后，我们利用更改检测中断的事实解决了问题，并使用角绑定[hidden]='true'在模型中创建了一个始终隐藏的元素，但是当更改检测中断时，它将被忽略，因此它中的文本将被显示出来，这样，当app真的崩溃时，我们甚至可以显示非常具体的消息。
<!-- 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>
<!---->Stack Overflow用户
发布于 2018-05-24 12:31:05
可以在全局级别上定义自定义错误处理程序，如下所示：
custom-error-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');
}
}<!-- 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
https://stackoverflow.com/questions/50506977
复制相似问题
腾讯云开发者
