Проверьте, присутствует ли выход на компоненте

Рассмотрим следующий компонент:

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

С звонком:

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

Обратите внимание, что я написал selectedChangeвместо правильного выходного имени selectionChange. Angular 9 с strictTemplatesвключенным флагом мне совсем не помог. Это молча провалилось. Интересно то, что если я делаю то же самое @Input, приложение ловит ошибки и не компилируется.

Есть ли способ выдать ошибку, если я попытаюсь «прослушать» несуществующее @Output?

Не выдается никакой ошибки, поскольку привязка событий в Angular используется не только с @Outputs и EventEmitters, но и для прослушивания событий 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, listener [, options]); внутренне (вы можете убедиться в этом, посмотрев ссылки ниже), где typeможет быть любая строка.

Вот почему он не выдает никаких исключений, если не находит подходящих @Outputs.

listenToElementOutputs

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 Code, вы можете установить это расширение: Angular Language Service выдаст предупреждение, если метод или свойство не определены. Это расширение работает с обоими выходами и входами (и attrs, и т. Д.).