Почему не будет ошибки компилятора при пропущенном свойстве?

Со следующим кодом:

шаблон

<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 сборки, но если вы раскомментируете вторую строку в шаблоне, вы ожидаете получить

Свойство 'foo' не существует для типа 'MyComponent'.

Почему <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>

И есть другие способы обойти это, но вопрос заключается в фундаментальном понимании, прежде чем делать ошибку или подвиг.

2 ответа

Решение

"Есть ли другие способы обойти это...?"

Вы пробовали это: https://angular.io/guide/aot-compiler?

Похоже, что эта настройка AOT (в настоящее время) неактивна по умолчанию.

Бонус:

Также см. Этот раздел в github компилятора по выражениям привязки: https://github.com/angular/angular/blob/master/aio/content/guide/aot-compiler.md#phase-3-binding-expression-validation

При проверке используется средство проверки типа TypeScript и параметры, предоставленные компилятору TypeScript, чтобы контролировать, насколько детализирована проверка типа.

На этом этапе выдается ошибка "Свойство X не существует для типа Y", и уровень детализации проверки корректируется с помощью параметров компилятора, таких как вышеупомянутый параметр "fulltemplatetypecheck".

Это был мой комментарий:

AoT предварительно компилирует шаблон и ищет сгенерированные привязки. С другой стороны, наличие его в ng-контейнере - особая вещь, поскольку ng-контейнер не будет интерпретироваться и, таким образом, компилироваться до тех пор, пока он не будет вызван.

Смотрите эту статью:

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


Я попытался найти в нем больше информации, и я просто вернулся к вашему первому комментарию об угловой проблеме:

С этой темой https://github.com/angular/angular/issues/20287 к этой проблеме привязано: https://github.com/angular/angular/issues/19792.

Кажется, это постоянная ошибка, так что это означает, что ng-контейнеры должны быть скомпилированы. Я думаю, что вы ничего не можете с этим поделать!

Другие вопросы по тегам