我被困在尝试将属性值传递到我的组件中。从我读过的东西看，一切看起来都正确。但它仍然不起作用。我的测试值输出到屏幕和控制台为空。 :(Angular 2 Component @Input not working

这是我的测试组件：

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>

当页面呈现的测试值是空的。我只看到'Test Value：'

而不是'Test Value：Blue32'。

来源

2015-10-25 Zorthgo

不要在模板中使用驼峰名。 HTML不区分大小写。 – alexpods

谢谢alex！我想我必须改变这种习惯。 ; 0） – Zorthgo

你有四件事情，我可以注意到：

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

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

实例更新到公测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的生命周期中。

来源

2015-10-25 12:27:09

感谢Eric的帮助！...这些都是非常好的一点。 “AfterViewInit”将真正派上用场。 :) – Zorthgo

这个plunkr好像坏了，我在最新的Chrome/Firefox上只看到“测试值：”。 – aikeru

@aikeru谢谢你让我知道。这真的很奇怪，plnkr几乎看起来不像答案中的代码。无论如何，我修好了:) –

我相信这里的问题可能与页面的生命周期有关。因为在构造函数中this.test的值是null。但是，如果我将一个按钮添加到链接到将值推送到控制台的函数上（与我在构造函数中完成的操作相同），this.test实际上会有一个值。

来源

2015-10-25 05:48:02 Zorthgo

upvoted为提示;但是解决方法是什么？ – mok

这个角类可以使静态属性的伎俩： 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') 
}

来源

2016-01-25 09:25:09

这就是我一直在寻找的。你是查尔斯的救世主！ – gautam1168

但该文档链接已过期。 – gautam1168

谢谢gautam1168。我解决了链接到期问题 –

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

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

并改变你的班级

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

来源

2016-07-23 22:51:55 jcmordan

你必须在子组件的顶部

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

来源

2016-12-31 08:49:30 Mukesh

当正在利用@input为角interaction.It总是优选的方法从母体传递数据导入输入这样JSON对象中的孩子显然不会被@Angular Team限制使用局部变量或静态变量。

在上下文中访问子组件的值使用ngOnInit（）{}角度生命钩周期不管构造函数如何。

这会帮助你。干杯。

来源

2017-07-15 08:18:29

分享了什么工作对我来说：

添加一个输入角4应用

假设我们有两个部分组成：

parent-component
child-component

我们想从parent-component一些价值从parent-component.html传递到child-component即一个@Input到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()。

对象引用在角2/4

在Javascript中的行为，对象存储为references。

这个确切的行为可以被重新制作，具有角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()会改变，因为他们参考的someInputValue都ChildComponent & ParentComponent内的值。因为，someInputValue从ParentComponent引用的someInputValue对象 - 在ChildComponent变化的someInputValue对象改变ParentComponent的someInputValue对象的值。 这是不正确的。引用永远不会改变。

来源

2017-08-14 19:30:16 xameeramir

是那么容易的字符串周围用双引号，像这样：

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

来源

2017-08-21 12:21:22 fgonzalez

Angular 2 Component @Input not working

回答

更新

相关问题