检查组件上是否存在输出

14

考虑以下组件：

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

致电：

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

请注意，我写的selectedChange不是正确的输出名称selectionChange。strictTemplates启用了标志的Angular 9 根本对我没有帮助。它无声地失败了。有趣的是，如果我对做了同样的事情@Input，则应用程序会捕获错误并且无法编译。

如果我尝试“侦听”不存在的内容，有什么办法抛出错误@Output？

angular angular-directive angular9

— dev_054
source

1

以前的Angular版本有任何错误吗？我认为它永远不会对此造成任何错误

— Aravind

@ Aravind不，它永远不会抛出错误。我问是否有可能。提前致谢。

— dev_054

你为什么要抛出错误？有特殊需要吗？我想了解您的问题

— Aravind

@Aravind好吧，我正在与许多开发人员一起开发企业应用程序，因此拥有某种信息/警告/错误很重要。有时有人@Output()在共享库中甚至在应用程序中更改/删除了，而忘记了删除调用 ...并且由于我们没有编译错误（例如for）@Input()，我们无法确切找到导致某些问题的原因（甚至是为了避免在代码中留下垃圾）。单元测试会有所帮助吗？也许可以，但由于时间原因，目前尚无法实现。

— dev_054

3

没有抛出错误，因为事件绑定使用在角不仅与@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

— 基里尔·西蒙诺夫（Kirill Simonov）
source

嘿@Kirill Simonov谢谢您的回答！好吧，以您的声明为例：“不会引发任何错误，因为Angular中的事件绑定不仅与@Outputs和EventEmitters一起使用，而且还侦听诸如click，keyup等的DOM事件”，为什么呢？不存在的@Input()（记住，输入具有相同的特点：可以是一些全球一样disabled，id等）的角度扔错误？为什么它适用@Input，但不适用@Output？此外，我试图找到一种方法，如果不存在，@Output则警告/引发错误。

— dev_054

@ dev_054这是因为属性集受DOM元素，指令或组件的现有属性限制，因此Angular可以轻松地检查此属性是否存在。另一方面，事件是使用绑定的addEventListener（我将在我的答案中添加一些链接以显示它）。我认为这是有意完成的，因此开发人员可以将事件绑定与自己的自定义事件一起使用。我相信没有办法在编译时禁用此行为。尽管某些IDE（例如IntelliJ Idea）可能会突出显示此类位置并显示警告。

— 基里尔西蒙诺夫

@ dev_054记住，您还可以使用对HTML属性使用单向绑定[attr.any-attribute]，在这种情况下，也不会引发任何错误。

— 基里尔西蒙诺夫

0

无法直接解决您的问题，但是可以解决某些情况。

如果您有100％的位置（例如按钮click事件）中使用过任何输出，则可以使其成为选择器的一部分，即selector: 'app-test[selectionChange]'。您也可以这样做，例如：selector: 'app-test[selectionChange]', app-test[click]'意义click或selectionChange必填。
如果要重构代码并将输出重命名为ie selectionChange，selectedChange则可以使用以下选择器：selector: 'app-test:not([selectionChange])'强制用户进行更新。

— 凯姆斯基
source

-4

如果使用的是VS Code，则可以安装此扩展程序：当未定义方法或属性时，Angular Language Service将引发警告。此扩展适用于输出和输入（以及attrs等）。

— srgrcp
source

您的示例显示一个@Input。对于@Output，Angular Language Service毫无帮助。让我知道您是否需要我澄清这个问题。

— dev_054

对于，@Output您将看到相同的错误消息。

— srgrcp