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

Question

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

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

Answer 1

Ошибка не генерируется, поскольку привязка события в Angular используется не только с @Output с и EventEmitter с, но и для прослушивания событий DOM * 1006. * такие как click, keyup, et c. Его можно использовать даже для прослушивания пользовательских событий . Например, если вы создаете и отправляете пользовательское событие в дочернем компоненте:

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 может быть любой строкой.

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

listenToElementOutputs

DefaultDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener

Answer 2

Нет прямого решения вашей проблемы, однако некоторые случаи могут быть рассмотрены.

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

Answer 3

Если вы используете VS Code, вы можете установить это расширение: Angular Language Service выдаст предупреждение, если метод или свойство не определены. Это расширение работает с обоими выходами и входами (и attrs, et c ...).