子组件不向父组件的函数发送值答案

【问题标题】：Child component not emitting value to parent component's function子组件不向父组件的函数发送值
【发布时间】：2016-05-06 12:24:33
【问题描述】：

我在父组件中定义了一个名为 login 的函数：

login(user: any) {
  console.log(user);
}

然后我有一个登录表单组件：

export class LoginFormComponent {
  @Output() onLogin: EventEmitter = new EventEmitter();

  constructor() {
    this.user = {};
  }
}

我是这样使用的：

<login-form (onLogin)="login(user)"></login-form>

看起来像这样：

<input type="email" [(ngModel)]="user.email">
<input type="password" [(ngModel)]="user.password">

在这个组件内部，我有一个简单的按钮，它应该执行onLogin 函数并将用户从login-form 组件传递到外部组件：

<button (click)="onLogin.emit(user)">Login</button>

问题在于user 在login 函数中始终未定义。

为什么user 没有从login-form 发送到我的父组件？

【问题讨论】：

【解决方案1】：

需要使用特殊标识符$event来获取传递的发射值：

<login-form (onLogin)="login($event)"></login-form>

user 指的是组件类的user 属性。

【讨论】：

这太愚蠢了，这是为什么呢？嗯，我认为它是指父组件，但不认为它是这样工作的。
我更新了我的答案。不知道为什么你认为它是愚蠢的。您可以引用组件的任何值或模板变量。为了让 Angular 清楚您想要传递事件值，而不是其他一些参考 Angular 具有 $event 标识符。
是的，我想这很聪明..会及时接受的，cheerios :)