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的@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()内部。
对象在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()会因为引用而改变ChildComponent ＆ ParentComponent内的someInputValue的值。 由于someInputValue是从ParentComponent的someInputValue 对象引用的， someInputValue ChildComponent的someInputValue 对象的改变改变了ParentComponent的someInputValue 对象的值。 这是不正确的 。 引用永远不会改变。
用双引号包围string很简单，就像这样：
<TestCmp [test]="'Blue32'"></TestCmp>
