将参数传递给 Angular2 组件

Question

我正在学习 Angular2，所以要温和…我有一个基本组件，它有一个字符串数组。我想将一个整数传递给该组件并让它返回在该参数的索引处找到的字符串。

例如，myComponent[number]=1 返回字符串“second element”。

到目前为止我的代码是这样的：

 import { Component } from '@angular/core';

@Component({
  selector: 'myComponent',
  template:
    `<h1>Returned Value {{returnedString}}</h1>,`,
  inputs:['number']
})
export class MyComponent  {
  myStringArray: string[];
  returnedString: string;

  constructor(){
    this.myStringArray = ['First','Second','Third','Forth','Fifth','Sixth'];
    this.returnedString = 'number'+this.myStringArray['number'.valueOf()];
  }
}

我调用这个组件如下

<myComponent [number]=1></myComponent>

我打印返回到屏幕的值并得到“未定义”。

有什么想法吗？

原文由 Fearghal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于您想绑定到自定义属性，因此从核心导入 Input 和 OnChanges，然后实现为 Input 以创建您的自定义属性。 OnChanges 只是确保您的值在绑定值更改时得到更新。

从组件装饰器中删除 inputs 键

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

@Component({
  selector: 'myComponent',
  template:
    `<h1>Returned Value {{returnedString}}</h1>,`
})
export class MyComponent  implements OnChanges {
  myStringArray: string[];
  returnedString: string;
  @Input() inputNumber: number;

  constructor(){
    this.myStringArray = ['First','Second','Third','Forth','Fifth','Sixth'];
    this.returnedString = 'number'+this.myStringArray[Number(this.inputNumber)];
  }

  ngOnChanges() {
    this.returnedString = 'number'+this.myStringArray[Number(this.inputNumber)];
  }
}

将您的代码用法更新为以下内容

<myComponent [inputNumber]="1"></myComponent>

这是一个示例 plunker。 https://plnkr.co/edit/S074zoVJ3ktQDKkcQgxe?p=preview

原文由 Evans M. 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我很难发送字符串输入。这是正确的方法，

 <myComponent [stringvar]="'string value'"></myComponent>

“字符串值”将不起作用。角度期望双引号内的对象或数字。字符串应该在双引号“’string’”内的单引号内

原文由 Som 发布，翻译遵循 CC BY-SA 3.0 许可协议