Question

我正试图遵循：http://learnangular2.com/outputs/

这就是我所拥有的：

account.component.html

<app-messagerie (onViewMessages)="handleOnViewMessages($event)"></app-messagerie>
<a (click)="onViewMessagerie(users.id)">My messages</a>

account.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

export class AccountComponent implements OnInit {

  @Output() onViewMessages = new EventEmitter();

...

onViewMessagerie(id){
  this.onViewMessages.emit(id)
}

messagerie.component.ts

handleOnViewMessages(id){
  console.log(id);
  console.log('ahah');
}

但是当我点击时没有任何事情发生。

我错过了什么，或做错了什么？

由于

Answer 1

您混合了父组件和子组件。 /是父级，因此它应该包含Account component方法。 handleOnViewMessages()是孩子，它应该有@Output装饰器通过事件发射器与父进行通信。

<强> account.compoent.html

messagerie component

<强> account.compoent.ts

<app-messagerie (onViewMessages)="handleOnViewMessages($event)"></app-messagerie>

<强> messagerie.component.ts

export class AccountComponent implements OnInit {

....

handleOnViewMessages(event){
  console.log(event);
  console.log('ahah');
}

<强> messagerie.html

 @Output() onViewMessages = new EventEmitter();

...

onViewMessagerie(id){
  this.onViewMessages.emit(id)
}

您将需要管理user.id，因为我无法看到整个代码。

Angular2：@Output和Event Emitter

1 个答案: