Angular 2 组件@Input 不起作用

Question

我一直试图将属性值传递到我的组件中。 从我所读到的一切看起来都是正确的。 但它仍然无法正常工作。 我的测试值输出到屏幕和控制台为空。 :(

这是我的测试组件：

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

@Component({
    selector: 'TestCmp',
    template: `Test Value : {{test}}`
})

export class TestCmp {

    @Input() test: string;

    constructor()
    {
        console.log('This if the value for user-id: ' + this.test);
    }
}

这就是我从父页面调用组件的方式。

<TestCmp [test]='Blue32'></TestCmp>

当页面呈现时，测试值为空。 我只看到“测试值：”。

而不是“测试值：Blue32”。

Answer 1

你有四件事我可以注意：

• 您正在根组件中传递一个输入，这将不起作用。
• 正如@alexpods 提到的，您正在使用 CamelCase。 你不应该。
• 您正在通过[test]传递表达式而不是字符串。 这意味着 angular2 正在寻找一个名为Blue32的变量，而不是传递一个原始字符串。
• 您正在使用构造函数。 那是行不通的，它必须在视图初始化之后数据绑定属性已经初始化（参见OnInit文档）。

所以通过一些修复它应该可以工作

示例更新为 beta 1

import {Component, Input} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
  selector : 'childcmp',
  template: `Test Value : {{test}}`
})
class ChildCmp {
    @Input() test: string;
    ngOnInit() {
        console.log('This if the value for user-id: ' + this.test);
    }
}

@Component({
    selector: 'testcmp',
    template : `<childcmp [test]="'Blue32'"></childcmp>`
    directives : [ChildCmp]
})
export class TestCmp {}

bootstrap(TestCmp);

以这个plnkr为例。

更新

我看到人们仍然得到了这个答案，所以我已经将 plnkr 更新为 beta 1 并且我更正了解释中的一点：您可以在 ngAfterViewInit 中访问输入，但您可以在 ngOnInit 的生命周期的早期访问它们。

Answer 2

就像用双引号将字符串括起来一样简单，如下所示：

<TestCmp [test]="'Blue32'"></TestCmp>

Answer 3

这个角度类可以为静态属性提供技巧： ElementRef https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html

import {ElementRef} from 'angular2/core'

constructor(elementRef: ElementRef) {
    elementRef.nativeElement.getAttribute('api')
}

Answer 4

如果您使用方括号 []，Angular 使用属性绑定并期望在引号内接收一个表达式，它会从您的组件类或模板内的变量中查找名为“Blue32”的属性。

如果您想将字符串作为值传递给子组件，您可以像这样传递它：

<child-component childProperty='passing string'></child-component>

或者如果您出于某种原因想要括号：

<child-component [childProperty]="'note double quotes'"></child-component>

然后像这样把它放到 child.component.ts 中：

import { Component, Input } from "@angular/core";

@Component({})
export class ChildComponent {

    @Input()
    childProperty: string;

}

Answer 5

我相信这里的问题可能与页面的生命周期有关。 因为在构造函数中 this.test 的值为空。 但是，如果我向模板中添加一个按钮，该按钮链接到一个将值推送到控制台的函数（与我在构造函数中所做的相同），则 this.test 实际上将具有一个值。

Answer 6

分享对我有用的东西：

向 Angular 4 应用程序添加输入

假设我们有 2 个组件：

• parent-component
• child-component

我们想通过一些价值parent-component到child-component即一个@Input从parent-component.html到child-component.ts 。 下面是一个解释实现的例子：

parent-component.html看起来像这样：

<child-component [someInputValue]="someInputValue"></child-component>

parent-component.ts看起来像这样：

  
  class ParentComponent {

  someInputValue = 'Some Input Value';

}

child-component.html看起来像这样：

<p>Some Input Value {{someInputValue}}</p>

child-component.ts看起来像这样：

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

@Component({
  selector: 'child-component',
  templateUrl: './child-component.html'
})
export class ChildComponent implements OnInit {

  @Input() someInputValue: String = "Some default value";

  @Input()
  set setSomeInputValue(val) {
    this.someInputValue += " modified";
  }

  constructor() {
    console.log('someInputValue in constructor ************** ', this.someInputValue); //someInputValue in constructor ************** undefined
  }

  ngOnInit() {
    console.log('someInputValue  in ngOnInit ************** ', this.someInputValue); //someInputValue  in ngOnInit ************** Some Input Value
  }
}

请注意， @Input值的值在ngOnInit()内部可用，而不是在constructor()内部。

Angular 2 / 4 中的对象引用行为

在 Javascript 中，对象存储为引用。

这个确切的行为可以在 Angular 2 / 4 的帮助下重新产生。 下面是一个解释实现的例子：

parent-component.ts看起来像这样：

  
  class ParentComponent {

  someInputValue = {input: 'Some Input Value'};

}

parent-component.html看起来像这样：

  
{{someInputValue.input}}

child-component.html看起来像这样：

Some Input Value {{someInputValue}}
change input

child-component.ts看起来像这样：

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

@Component({
  selector: 'child-component',
  templateUrl: './child-component.html'
})
export class ChildComponent implements OnInit {

  @Input() someInputValue = {input:"Some default value"};

  @Input()
  set setSomeInputValue(val) {
    this.someInputValue.input += " set from setter";
  }

  constructor() {
    console.log('someInputValue in constructor ************** ', this.someInputValue); //someInputValue in constructor ************** undefined
  }

  ngOnInit() {
    console.log('someInputValue  in ngOnInit ************** ', this.someInputValue); //someInputValue  in ngOnInit ************** Some Input Value
  }

  changeInput(){
    this.someInputValue.input += " changed";
  }
}

函数changeInput()将更改ChildComponent和ParentComponent中someInputValue的值，因为它们的引用。 因为， someInputValue是从ParentComponent的someInputValue对象引用的 - ChildComponent的someInputValue对象的变化改变了ParentComponent的someInputValue对象的值。 这不正确。 引用永远不会改变。

Answer 7

也许看起来像一个锤子，但你可以把输入包裹在这样的对象上：

<TestCmp [test]='{color: 'Blue32'}'></TestCmp>

并改变你的班级

class ChildCmp {
    @Input() test: any;
    ngOnInit() {
        console.log('This if the value for user-id: ' + this.test);
    }
}

Answer 8

您必须在子组件顶部导入这样的输入

import { Directive, Component, OnInit, Input } from '@angular/core';

Answer 9

当您使用@Input 进行角度交互时。显然，在 JSON 对象中将数据从父级传递给子级始终是首选方法，@Angular Team 并不限制使用局部变量或静态变量。

在上下文中访问子组件上的值，无论构造函数如何，都使用ngOnInit(){} angular life hook cycle 。

那会帮助你。 干杯。

Answer 10

当我遇到这个问题时，实际上只是我必须首先修复一个编译错误（需要解决循环依赖项）。