Vérifiez si la sortie est présente sur le composant

Considérez le composant suivant:

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

Avec l'appel:

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

Notez que j'ai écrit à la selectedChangeplace du nom de sortie correct selectionChange. L'angulaire 9 avec le drapeau strictTemplatesactivé ne m'a pas du tout aidé. Il a échoué en silence. La partie intéressante est que si je fais la même chose pour @Input, l'application détecte les erreurs et ne compile pas.

Existe-t-il un moyen de lancer une erreur si j'essaie «d'écouter» un fichier inexistant @Output?

Il n'y a pas d' erreur lancée parce que l' événement de liaison dans angulaire est utilisé non seulement avec @Outputs et EventEmitters, mais aussi d'écouter les événements DOM tels que click, keyup, etc. Il pourrait même être utilisé pour écouter les événements personnalisés . Par exemple, si vous créez et émettez un événement personnalisé dans le composant enfant:

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

Ensuite, dans le composant parent, vous pouvez l'attraper par son nom:

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

Angular utilise target.addEventListener (type, écouteur [, options]); en interne (vous pouvez vous en assurer en consultant les liens ci-dessous), où typepourrait être n'importe quelle chaîne.

C'est pourquoi il ne lève aucune exception s'il ne trouve pas de @Outputs correspondant .

listenToElementOutputs

DefaultDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener

Il n'y a pas de solution directe à votre problème, mais certains cas peuvent être couverts.

1. Si vous avez une sortie utilisée dans 100% des endroits comme un clickévénement de bouton , vous pouvez l'intégrer au sélecteur, c'est-à-dire selector: 'app-test[selectionChange]'. Vous pouvez également le faire par exemple: selector: 'app-test[selectionChange]', app-test[click]'signifiant clickou selectionChangeest requis.
2. Si vous refactorisez le code et renommez la sortie, c.- selectionChangeà - d., selectedChangeVous pouvez utiliser ce sélecteur: selector: 'app-test:not([selectionChange])'pour forcer les utilisateurs à mettre à jour.

Si vous utilisez VS Code, vous pouvez installer cette extension: Angular Language Service émet un avertissement lorsqu'une méthode ou une propriété n'est pas définie. Cette extension fonctionne à la fois avec les sorties et les entrées (et attrs, etc ...).