Angular2:@Output和Event Emitter

时间:2017-08-28 15:57:39

标签: angular

我正试图遵循: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');
}

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

我错过了什么,或做错了什么?

由于

1 个答案:

答案 0 :(得分: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,因为我无法看到整个代码。