Angular 2 Component @Input不工作

我被困在试图传递一个属性值到我的组件。 从我看过的一切看起来都是正确的。 但它仍然没有工作。 我的testing值输出到屏幕和控制台为空。 🙁

这是我的testing组件:

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> 

当页面渲染的testing值是空的。 我只看到“testing值:”。

而不是“testing值:Blue32”。

你有四件事我可以注意到:

  • 你在根组件中传入一个input,这是行不通的。
  • 正如@alexpods提到的,你正在使用CamelCase。 你不应该。
  • 你通过[test]传递一个expression式而不是一个string。 这意味着angular2正在寻找名为Blue32的variables,而不是传递一个原始string。
  • 你正在使用构造函数。 这将无法正常工作,它必须在视图被初始化后才能初始化数据绑定属性(请参阅OnInit的文档)。

所以有一些修复它应该工作

示例已更新至testing版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为例。

更新

我发现人们仍然可以得到这个答案,所以我已经将pnkr更新为beta 1,并且更正了解释中的一点:您可以在ngAfterViewInit中访问input,但可以在ngOnInit的生命周期的早期访问它们。

这个angular度类可以使静态属性的技巧: 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') } 

我相信这里的问题可能与页面的生命周期有关。 因为在构造函数中this.test的值是null。 但是,如果我将一个button添加到链接到一个函数的模板,将值推到控制台(与我在构造函数中一样),this.test实际上会有一个值。

也许看起来像一个锤子 ,但你可以把input包裹在一个像这样的对象:

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

并改变你的class级

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

你必须像这样在子组件的顶部导入input

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

当你使用@Input进行angular度交互时,总是首选将JSON对象中的数据从父对象传递给子对象,显然它不会被@Angular Team限制使用局部variables或静态variables。

在上下文中访问子组件的值使用ngOnInit(){}angular度生命钩子循环,不pipe构造函数如何。

这将帮助你。 干杯。

分享什么对我有用:

添加一个input到Angular 4应用程序

假设我们有两个组件:

  • parent-component
  • child-component

我们想要从parent-component传递一些值给child-component就是从parent-component.html@Inputchild-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()内部。

对象在Angular2 / 4中引用行为

在Javascript中,对象被存储为引用 。

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

parent-component.ts如下所示:

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

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

 {{someInputValue.input}} 

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

 

 

一些input值{{someInputValue}}

改变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()会因为引用而改变ChildComponentParentComponent内的someInputValue的值。 由于someInputValue是从ParentComponentsomeInputValue 对象引用的, someInputValue ChildComponentsomeInputValue 对象的改变改变了ParentComponentsomeInputValue 对象的值。 这是不正确的 。 引用永远不会改变。

用双引号包围string很简单,就像这样:

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