Angular 2：在组件内使用 @Input 做一些事情

如何使用组件内的 @Input 值执行某些操作？

例如：

<log-user [user]="user"></log-user>

我们假设user是一个对象。现在，我知道如何在日志用户模板中传递此用户数据，但是我该如何用它来做一些事情user在其组件内？

LogUserComponent:

@Component({
  selector: 'log-user',
  template: `

    This works: {{user}}

  `
})

export class LogUserComponent {

  @Input() user:any;

  constructor() {
    // this get's logged as undefined??
    console.log(this.user);
  }
}

任何帮助都会很棒！提前致谢！

就施工时间而言@Input值尚未设置。 Angular2如何设置@Input组件实际构建之前的值？

必须等待组件初始化；意思是全部@Input值已设置。您可以通过实施来做到这一点OnInit界面。

所以要修复你的例子：

<log-user [user]="user"></log-user>

^{(Note: user must be a defined object, otherwise in this example undefined would still be logged. You can add *ngIf="user" to the log-user html tag to ensure the tag does not get rendered before user actually exists.)}

Do:

import {Component, Input, OnInit} from 'angular2/core';

@Component({
  selector: 'log-user',
  template: `This works: {{user}}`
})
export class LogUserComponent implements OnInit {

  @Input() user:any;

  ngOnInit() {
    // this now gets logged as 'user'
    console.log(this.user);
  }
}

您也可以只创建ngOnInit组件上的方法而不实现接口，而是通过导入OnInitTypescript 编译器确保您不会犯下拼写错误。

The 关于 OnInit 的 Angular 文档 https://angular.io/api/core/OnInit states:

实现该接口后执行自定义初始化逻辑 您的指令的数据绑定属性已初始化。

ngOnInit 在指令的数据绑定属性之后立即调用 已被第一次检查，并且在其任何子项之前 已被检查。当指令是时，它仅被调用一次 实例化。