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

arrayValue="[1,2,3,4,5]" 会将您提供的值作为字符串传递。如果你真的想要以这种方式传递数组，你将不得不自己解析它（例如，使用JSON.parse），可能在getter 对于 arrayValue.

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

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

Answer 2

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

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

只需使用这个：

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

这是为了指示 angular 将值作为表达式来处理。

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

Angular 2 pass array into directive via attribute not variable

javascript

angular2-directives

angular