Question

使用以下代码：

模板

<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-container为什么没有错误？

在您建议之前：

<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>

还有其他解决方法，但是问题是在做出错误或壮举之前需要基本了解。

Answer 1

“还有其他解决方法吗？”

您是否尝试过此操作：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”）来调整验证细节的级别。

Answer 2

这是我的评论：

AoT会预先编译模板，并正在寻找要生成的绑定。另一方面，将其包含在ng容器中是一件特别的事情，因为ng容器在被调用之前不会被解释和编译。

查看本文：

https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/

我尝试在其中搜索更多信息，然后回到您对Angular问题的第一条评论：

从此线程https://github.com/angular/angular/issues/20287到与此问题相关的链接：https://github.com/angular/angular/issues/19792。

这似乎是一个持续存在的错误，因此这意味着应该对ng容器进行编译。我想您现在无能为力了！

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

2 个答案:

奖金：