为什么@Output不发出任何东西（角度8）

Question

我正在尝试通过@Output将对象传输到锅组件。

但是emitt不返回任何东西，当您将其放入日志时，它是未定义的。

这是我的代码：

发射器组件：

@Output() menubuttonclicked = new EventEmitter<object>();
.
.
.
clickedmenu(id: string) {
    this.rclickemit.buttonid = id ;
    this.menubuttonclicked.emit(this.rclickemit);
  }

发射器html：

<button *ngFor ="let button of Setting.menu" (click)="clickedmenu(button.id)" mat-menu-item>
    <mat-icon>{{button.icon}}</mat-icon>
    <span>{{button.name}}</span>
  </button>

收件人组成：

ngOnChanges(changes: SimpleChanges): void {
    if (changes['emit']) {
      console.log(this.emit);
    }
  }

但是，控制台上无法打印任何内容。 我给了emit变量以获得输出，但其中没有值。 有人知道这个问题吗？

更新

收件人组成：

<app-ir-graph-d3  [node]="nodes" [link]="links" [Setting]="Setting" (menubuttonclicked)="emit"></app-ir-graph-d3>

Answer 1

输出事件发射器用作带括号的属性。 例如：

在您的收件人模板中：

<app-transmitter-component (menubuttonclicked)="onMenuButtonClicked($event)"></app-transmitter-component>

在收件人组件中：

onMenuButtonClicked = (buttonID) => {
   console.log(buttonID)
}

进一步阅读： https : //angular.io/guide/component-interaction

ngOnChanges当变化在数据绑定性能如happend称为@Input性质。

OnChange： https ： //angular.io/api/core/OnChanges

Answer 2

您需要处理Output 。 让我举一个例子：

yourOutputComponent.ts：

export class yourOutputComponent implements OnInit {
  @Output() change = new EventEmitter();

  onClick(){
    this.change.emit({newValue: 'I am your data' });
  }
}

并订阅了组件fooComponent.html ：

<yourOutput (change)="hello($event)"></yourOutput>

fooComponent.ts：

export class fooComponent implements OnInit {
    hello(event:any) {
        console.log(event);
    }
}

Answer 3

您应该收听收件人组件的html中的更改，而不是ngOnChanges

<recipient-component (menubuttonclicked)='clickHandler($event)'></recipient-component>

然后在打字稿文件中，声明clickHandler函数并在此处接收输入。

Answer 4

无论在“传输”组件中的何处使用了“收件人”组件，请编写eventEmmiter变量，然后在“收件人”组件中监听该事件。

<Recipient Component (menubuttonclicked) = "matButtonClicked($event)">

收件人组成

matButtonClicked(event) {
 console.log(event) // 'this.rclickemit'
}