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

时间:2017-07-24 22:55:04

标签: javascript angular angular2-directives

使用我自己的自定义组件,并坚持如何使它同时使用属性和变量。我使用@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]"那样传递字符串

2 个答案:

答案 0 :(得分:2)

arrayValue="[1,2,3,4,5]"会将您提供的值作为字符串传递。如果确实希望能够以这种方式传递数组,那么您必须自己解析它(例如,使用JSON.parse),可能在{的getter中{1}}。

arrayValue

但问题是,你为什么要这样做?不建议这样做。

答案 1 :(得分:0)

您想要的东西与您的第一个版本相似:

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

只需使用此:

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

这就是将指令名称括在方括号中,以指示angular将值视为表达式。