為什么@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'
}