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

【问题标题】：Angular 2: Do something with @Input inside ComponentAngular 2：在组件内使用 @Input 做一些事情
【发布时间】：2016-01-02 16:44:29
【问题描述】：

如何处理组件内的@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);
  }
}

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

【问题讨论】：

标签： angular

【解决方案1】：

在构建时，@Input 的值尚未设置。 Angular2如何在组件实际构建之前设置@Input值？

你必须等待组件被初始化；表示所有@Input 值都已设置。您可以通过实现OnInit 接口来实现。

所以要修正你的例子：

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

^{(注意：user 必须是已定义的对象，否则在此示例中仍会记录 undefined。您可以将 *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 在指令的数据绑定属性之后调用已经被第一次检查，并且在它的任何孩子之前已检查。当指令被调用时它只被调用一次实例化。

【讨论】：

感谢您的宝贵时间，但我已经尝试过了，但它仍然记录为未定义？
另外，我尝试只传递一个字符串，而不是传递一个对象：<log-user [user]="'just a string'"></log-user>。这有效并记录在组件内。那么按照我尝试的方式传入一个对象有什么问题吗？ @Lodewijk
没有错。它必须在控制器被实例化之前存在。
我添加了一条注释来解决这个问题。
这种方法行不通。我完全按照示例中所示进行。

【解决方案2】：

经过一番研究，我发现了这个帖子“@Input property is undefined in angular 2's onInit”。

所以答案其实很简单。因为在这个例子中 user 是一个来自 API 调用的对象，它在组件初始化时是未定义的（希望我说的是正确的方式）.. 使用 *ngIf 可以解决这个问题：

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

【讨论】：

好点。我在我的答案中添加了一条注释来解决这一点，以便有相同问题的人可以一次性获得整个答案。谢谢

【解决方案3】：

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

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

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

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() {

  }
}

【讨论】：