时间戳

首页 > 解决方案 > 为什么在缺少属性时不会出现编译器错误？

angular - 为什么在缺少属性时不会出现编译器错误？

问题描述

使用以下代码：

模板

<button (click)="myMethod()">myMethod()</button>
<!-- <button (click)="foo()">foo()</button> -->

<ng-container [ngSwitch]="state">
  <ng-container *ngSwitchCase="0">
    <div></div>
    <button (click)="myMethod()">myMethod()</button>
    <button (click)="foo()">foo()</button><!-- why no error -->
  </ng-container>
  <div *ngSwitchCase="1"></div>
</ng-container>

零件

export class MyComponent {

  public state = 0;

  public myMethod(): void {
    // no op
  }

}

ng build --aot构建，但如果你取消注释模板中的第二行，你会得到

类型“MyComponent”上不存在属性“foo”。

为什么<button (click)="foo()">foo()</button>里面的ng-containernot错误？

在您建议之前：

<div *ngSwitchCase="0">
  <div></div>
  <button (click)="myMethod()">myMethod()</button>
  <button (click)="foo()">foo()</button><!-- why no error -->
</div>

这将呈现为

<div>
  <div></div>
  <button>myMethod()</button>
  <button>foo()</button>
</div>

但我只需要

<div></div>
<button>myMethod()</button>
<button>foo()</button>

还有其他方法可以解决这个问题，但问题是在制作错误或壮举之前进行基本的理解。

标签： angularangular-aot

解决方案

“有没有其他办法解决这个问题……？”

您是否尝试过：https ://angular.io/guide/aot-compiler#fulltemplatetypecheck ？

默认情况下，此 AOT 设置（当前）似乎处于非活动状态。

奖金：

另请参阅编译器 github 上有关绑定表达式的本节：https ://github.com/angular/angular/blob/master/aio/content/guide/aot-compiler.md#phase-3-binding-expression-validation

验证使用 TypeScript 类型检查器和提供给 TypeScript 编译器的选项来控制类型验证的详细程度

在此阶段会抛出错误“类型 Y 上不存在属性 X”，并且可以通过编译器参数调整验证细节的级别，例如上述参数“fulltemplatetypecheck”。

推荐阅读