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
  }
}

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