Со следующим кодом:
шаблон
<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>
И есть другие способы обойти это, но вопрос заключается в фундаментальном понимании, прежде чем делать ошибку или подвиг.