Question

我正在尝试通过@Output将对象转移到锅组件中。

但是发射不会返回任何内容，当您将其放入日志中时，它是未定义的。

这是我的代码：

发射器组件：

@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属性）发生更改时，会调用

@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'
}

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

4 个答案: