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

但是問題是，為什么要這樣做？ 不推薦。