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 的getter 中。

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

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