绑定不存在的属性时，可以使Angular Compiler引发错误吗? [英] Can I make the Angular Compiler throw an error when a non-existing property is bound?

问题描述

请考虑以下模板:

<p>Hello, {{ name }}</p>
<button (click)="doLogin()">Login</button>

与此TS级一起:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

name和doLogin()都不存在.它仍然可以编译并运行而没有错误.仅当我尝试单击按钮时，我在浏览器的控制台中收到错误消息 doLogin不是函数.

Neither name nor doLogin() exist. Still it compiles and runs without error. Only when I try to click the button, I get the error message doLogin is not a function in the browser's console.

我确实知道，这种行为(运行时错误)主要是Javascript所要实现的.不过，我希望在编译时显示尽可能多的错误.使用Typescript可以完成大部分工作.

I do know, that this behaviour (errors on runtime) is mostly intended by Javascript. Nevertheless, I'd like to have as many errors shown as possible at compile time. Using Typescript does most of this work.

但是，似乎在编译时不评估属性绑定.我认为，Angular-Compiler应该能够做到这一点.我尝试将 fulltemplatetypecheck 设置为true，但这似乎并不能解决问题.用ng serve，ng build和ng build --prod进行了尝试.

However, property bindings seem not to be evaluated at compile time. In my opinion, the Angular-Compiler should be capable of this. I tried setting fulltemplatetypecheck to true, but this didn't seem to do the trick. Tried it with ng serve, ng build and ng build --prod.

是否有一种在编译时检测不存在的属性绑定的方法?如果不是，这是预期的行为吗?

我正在使用Angular 5.2.0，Typescript 2.5.3和Angular CLI 1.6.4

I'm using Angular 5.2.0, Typescript 2.5.3 and Angular CLI 1.6.4

推荐答案

该功能将在angular 6上可用.基于问题.

The feature will be available on angular 6. Based on the Issue.

我们有一个名为fullTemplateTypeCheck的新编译器设置(请参阅 https://github.com. com/angular/angular/blob/master/packages/compiler-cli/src/transformers/api.ts#L99 ) 这将揭示此错误.

We have a new compiler setting called fullTemplateTypeCheck (see https://github.com/angular/angular/blob/master/packages/compiler-cli/src/transformers/api.ts#L99) which will reveal this error.

此设置将成为Angular 6中的默认设置，该设置非常重要 推荐的.我们没有在Angular 5中打开以不破坏现有的 用户. IE.您在这里看到的行为正是用户所看到的 在Angular 4中.

This setting will become the default in Angular 6, and is highly recommended. We didn't turn in on in Angular 5 to not break existing users. I.e. the behavior you are seeing here is exactly what users saw in Angular 4.

下方6号角线

您可以使用 TS Lint 来实现此目的. 我已经将 TS Lint 与Visual Studio代码一起用于验证不存在的属性绑定和方法.

You can USE TS Lint to achieve this. I have used TS Lint with visual studio code to validate non-existent property bindings and methods.

它不会阻止您进行编译，但仍会显示错误.

It wont stop you from compiling but still show a error.

TS Lint将验证在组件中找不到的method,property

TS Lint will validate method,property not found in the component

有角度的CLI仍然可以成功编译您的代码.

这篇关于绑定不存在的属性时，可以使Angular Compiler引发错误吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！