Angular - 一个组件中有两个输出事件，但只有一个有效答案

【问题标题】：Angular - two output-events in one component, but only one worksAngular - 一个组件中有两个输出事件，但只有一个有效
【发布时间】：2017-12-15 16:44:04
【问题描述】：

我希望子组件在其父组件中发出两个不同的事件，具体取决于用户单击的按钮。第一个 (onSelectedKat) 工作正常。但第二个 (onAllClick) 不起作用。它的结构和第一个一样，我只是改了名字。

我试图跳过所有不必要的代码，所以它不会太混乱。

这是孩子的html代码。它有两个按钮，点击时会调用两个不同的函数。这些函数依次调用发射器函数。

<a (click)="selectKat(kategorie.name)" class="btn btn-default btn-kat" role="button">{{kategorie.name}}</a>

<a (click)="clickAll()" class="btn btn-default btn-kat" role="button">Alle</a>

这是孩子的密码。在这里，它卡在了 clickAll() 函数中。 console.log 有效，但之后的一切都没有。

import { EintraegeComponent } from '../eintraege/eintraege.component';

@Component({
  selector: 'app-kategorien',
  templateUrl: './kategorien.component.html',
  styleUrls: ['./kategorien.component.css'],

})
export class KategorienComponent implements OnInit {

  @Output() onSelectedKat = new EventEmitter<string>();
  @Output() onAllClick = new EventEmitter<any>();

  constructor() {}

  ngOnInit() {}

  selectKat(name: string){
    this.onSelectedKat.emit(name);
  }

  clickAll(){
    console.log("clicked in child works");
    this.onAllClick.emit();
  }

}

这是父母的代码。然而，那个 onAllClick() 永远不会被调用。

@Component({
  selector: 'app-eintraege',
  templateUrl: './eintraege.component.html',
  styleUrls: ['./eintraege.component.css']
})
export class EintraegeComponent implements OnInit {

  eintraegegeordnet:boolean;
  toFilter:string;

  constructor() { 
      this.eintraegegeordnet = false;
    }

  ngOnInit() {}

  onAllClick(){
    console.log("Click in parent works");
    this.toFilter = "boo";
    this.eintraegegeordnet = false;
  }

  onSelectedKat(name:string){
    this.eintraegegeordnet = true;
    this.toFilter = name;
  }   

}

谁能告诉我我做错了什么以及为什么其中一个有效而另一个无效？

【问题讨论】：

你能添加它监听 onAllClick 的父 HTML 吗？再加上尝试从 EventEmitter 中删除，因为在这种情况下它期望数据。
哦，我明白你的意思了，我完全忘记在 html 中添加函数了。感谢您的提示，我只是尝试添加它并查看它是否有效！

标签： javascript angular output

【解决方案1】：

感谢Raed Khalaf 的提示，现在可以使用了。我忘了在父 HTML 中添加函数。

<app-kategorien (onSelectedKat)="onSelectedKat($event)" (onAllClick)="onAllClick($event)"></app-kategorien>

【讨论】：