Angular 2 通过属性而不是变量将数组传递到指令中

Question

使用我自己的自定义组件并坚持如何使其使用属性和变量。我正在使用 @Input 属性指令，当我传入正确范围的变量时，这会起作用。

组件（有效）

<mycomp [arrayValue]= "someArrayVar">html</mycomp>

但我不确定我需要做什么才能完成这项工作？？

组件（不工作）

<mycomp arrayValue= "[1,2,3,4,5]">html</mycomp>

我的指令看起来像这样......

指令

    export class MyComp implements DoCheck, OnInit {

      @Input() arrayValue: number[];

如果有人能够解释我如何实现输入别名和属性以在不使用变量且传递字符串（如

"[1,2,3,4,5]"

）时传递，我将不胜感激

Answer 1

您想要的与您的第一个版本类似：

<mycomp [arrayValue]= "someArrayVar">html</mycomp>

就用这个：

<mycomp [arrayValue]= "[1,2,3,4,5]">html</mycomp>

即保留指令名称周围的括号，以便指示 Angular 将值视为表达式。

Answer 2

arrayValue="[1,2,3,4,5]"

将以字符串形式传递您给出的值。如果您真的想要以这种方式传递数组，您必须自己解析它（例如，使用

JSON.parse

），可能在

arrayValue

的setter（而不是getter）中。

@Input() set arrayValue(value: string | number[]) {
  if (typeof value == 'string') {
    this._arrayValue = JSON.parse(value)
  } else {
    this._arrayValue = value
  }
}

但问题是，为什么要这样做？不推荐。