4

考虑以下模板：

<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 is not a function in the browser's console。

我知道，这种行为（运行时错误）主要是由 Javascript 设计的。不过，我希望在编译时显示尽可能多的错误。使用 Typescript 完成了大部分工作。

但是，属性绑定似乎没有在编译时进行评估。在我看来，Angular-Compiler 应该能够做到这一点。我尝试将fulltemplatetypecheck设置为 true，但这似乎没有奏效。ng serve用,ng build和尝试过ng build --prod。

有没有办法在编译时检测不存在的属性绑定？如果不是，这是预期的行为吗？

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

4

1 回答 1

2

该功能将在 Angular 6 上可用。基于问题。

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

此设置将成为 Angular 6 中的默认设置，强烈推荐。我们没有在 Angular 5 中启用以不破坏现有用户。也就是说，您在这里看到的行为正是用户在 Angular 4 中看到的。

Angular 6 下面

您可以使用TS Lint来实现这一点。我使用TS Lint和 Visual Studio 代码来验证不存在的属性绑定和方法。

它不会阻止您编译，但仍会显示错误。

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

Ts Lint 在 Visual Studio 代码中显示错误

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

于 2018-03-21T09:56:02.583 回答