Angular 2组件@Input无法正常工作

问题描述 投票：66回答：9

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

这是我的测试组件：

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'。

javascript angular typescript
9个回答
122
投票

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

  • 您正在根组件中传递输入，这将无法正常工作。
  • 正如@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为例。

Update

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

9
投票

用双引号包围字符串很简单，如下所示：

<TestCmp [test]="'Blue32'"></TestCmp>
5
投票

这个角度类可以成为静态属性的技巧：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')
}
5
投票

如果使用方括号[]，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;

}
2
投票

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

1
投票

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

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

并改变你的课程

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

分享对我有用的东西：

向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中，对象存储为references。

在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()将改变someInputValue和ChildComponent中ParentComponent的值，因为它们的参考。因为，someInputValue是从ParentComponent的someInputValue对象引用的 - ChildComponent的someInputValue对象的变化改变了ParentComponent的someInputValue对象的值。这不是正确的。参考不得改变。

0
投票

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

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

当你使用@Input进行角度交互时。总是首选的方法是将数据从父对象传递到JSON对象中，显然它不会被@Angular团队限制使用局部变量或静态变量。

在访问子组件的值的上下文中，无论构造函数如何，都要使用ngOnInit（）{}角度生命挂钩循环。

这会帮助你。干杯。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.