如何从组件模板中将数组作为Input()传递？

Question

我需要使用绑定将值数组传递给组件,例如

@Component({
    selector: 'my-component',
    template: '<div data="[1, 2, 'test']"></div>
})
export class MyComponent {
    @Input() data: any[];
    ...
}

但是,似乎Angular将其视为string/ string[1](在实际项目中,数组是一个路由,我需要将此路由传递给具有该[routerLink]指令的组件).

我该怎么做？

Answer 1

您需要包装该属性,[]否则它根本不会被Angular处理:

[data]="[1, 2, 'test']"

您的示例似乎是data从组件内部设置的.这不是具有约束力的方式.您可以对组件执行的操作是<my-component [data]="[1, 2, 'test']"></my-component>将数据从外部传递到组件.

Answer 2

所以让我们从这里开始......在Angular 2+中,如果它们没有得到括号,那么所有输入都将向下传递一个字符串...

所以有两种方法可以传递你的价值......

如果你这样写: '<div data="[1, 2, 'test']"'

你基本上把它当作"[1,2,'test']"(作为字符串)......

你做的方式是传递字符串的好方法,你也可以使用插值并将其与javascript混合,然后将其传递下来,如'Angular {{version}}'

因此,要将其作为数组或任何javascript无限值传递下去,您需要[]像这样使用您的输入...

<div [data]="[1, 2, 'test']"></div>