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

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值尚未设定.@Input在实际构建组件之前,Angular2如何设置该值？

您必须等待组件初始化; 意味着@Input已经设置了所有值.您可以通过实现OnInit界面来实现.

所以要修复你的例子:

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

^{(注意:user必须是已定义的对象,否则在此示例中仍会记录未定义.您可以添加*ngIf="user"到log-userhtml标记以确保标记在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编译器确保不会出现拼写错误.

关于OnInit的Angular文档声明:

在初始化指令的数据绑定属性后,实现此接口以执行自定义初始化逻辑.

在第一次检查指令的数据绑定属性之后,以及在检查其任何子项之前,立即调用ngOnInit.实例化指令时仅调用一次.

Answer 2

经过一些研究,我发现这篇文章" @Input属性在角度2的onInit中未定义 ".

所以答案其实很简单.因为在这个例子中user是一个来自API调用的对象,所以在组件初始化时它是未定义的(希望我说的是正确的方法).使用*ngIf修复:

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