Question

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

例如：

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

我们假设user是一个对象。现在，我知道如何在te log-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);
  }
}

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

Answer 1

在施工时，尚未设定@Input值。在实际构造组件之前，Angular2如何设置@Input值？

您必须等待组件初始化;意味着已设置所有@Input值。您可以通过实施OnInit接口来实现此目的。

所以要修复你的例子：

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

^{（注意：user必须是已定义的对象，否则在此示例中仍会记录未定义。您可以将*ngIf="user"添加到log-user html标记确保在user实际存在之前不会呈现标记。）}

执行：

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方法而不实现接口，但是通过导入OnInit接口，您可以通过Typescript编译器确保错误输入错误。

Angular docs about OnInit州：

实现此接口以在之后执行自定义初始化逻辑   您的指令的数据绑定属性已初始化。
     在指令的数据绑定属性之后立即调用
ngOnInit   已经第一次检查，并在其任何一个孩子之前   已经过检查。它仅在指令时调用一次   实例

Answer 2

经过一些研究，我发现这篇文章“@Input property is undefined in angular 2's onInit”。

所以答案其实很简单。因为在这个例子中user是一个来自API调用的对象，所以在组件初始化时它是未定义的（希望我说的是正确的方法）。使用*ngIf修复了这个：< / p>

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

Answer 3

由于我们的Angular组件是带有@Component（）装饰器的ES6类，我们能够利用TS访问器拦截注入的值，如下所示：

主要区别在于，我们不是装饰属性，而是装饰setter。

更多详情http://www.typescriptlang.org/docs/handbook/classes.html

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

Inside Component.ts

export class LogUserComponent {
  private _user:any;

  get user() {
    return this._user;
  }
  @Input() 
  set user( user:any) {
    // to catch undefined user 
    if(!user) return;
    this._user = user;
    // modify the user here example below
    // this._user = 'X' + user;
  }

  constructor() {

  }
}

Angular 2：在Component中使用@Input做一些事情

3 个答案: