Перевірте, чи є вихід на компоненті

Розглянемо наступний компонент:

@Component({
  selector: 'app-test'
  template: 'Hello!'
}}
export class TestComponent {
  @Output() readonly selectionChange = new EventEmitter<SomeTypeHere>();
}

Зателефонувавши:

<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>

Зауважте, що я написав selectedChangeзамість правильної назви виводу selectionChange. Кутовий 9 із strictTemplatesвключеним прапором мені зовсім не допомагав. Це провалилось мовчки. Цікава частина полягає в тому, що якщо я роблю те саме @Input, програма додає помилки (і) і не компілюється.

Чи є спосіб помилитися, якщо я спробую "прослухати" неіснуюче @Output?

Там немає помилки викинута , тому що подія зв'язування в кутовому використовуються не тільки @Outputз і EventEmitterс, а й слухати DOM подія , такі як click, keyupі так далі Можна навіть використовувати для прослуховування користувальницьких подій . Наприклад, якщо ви створюєте та передаєте власну подію в дочірньому компоненті:

constructor (private el: ElementRef) {}
ngOnInit(): void {
    const domEvent = new CustomEvent('selectedChange', { custom: true });
    this.el.nativeElement.dispatchEvent(domEvent);
}

Тоді в батьківському компоненті ви можете зловити його за назвою:

<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>

Angular використовує target.addEventListener (тип, слухач [, параметри]); внутрішньо (ви можете переконатися в цьому, переглядаючи посилання нижче), де typeможе бути будь-який рядок.

Ось чому він не кидає жодного винятку, якщо не знаходить відповідних @Outputs.

listeToElementOutputs

DefaultDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener

Немає прямого вирішення вашої проблеми, проте деякі випадки можуть бути охоплені.

1. Якщо у вас є який-небудь вихід, який використовується в 100% місцях, таких як clickподія кнопки, то ви можете зробити його частиною селектора, тобто selector: 'app-test[selectionChange]'. Також ви можете зробити це, наприклад: selector: 'app-test[selectionChange]', app-test[click]'значення clickабо selectionChangeпотрібно.
2. Якщо ви перепрофілюєте код і перейменовуєте вихід, тобто selectionChangeдля selectedChangeцього, ви можете використовувати цей селектор: selector: 'app-test:not([selectionChange])'змусити користувачів оновлюватись.

Якщо ви використовуєте код VS, ви можете встановити це розширення: Angular Language Service видасть попередження, коли метод або властивість не визначені. Це розширення працює як з виходами, так і з входами (і attrs, і т.д. ...).