如何从组件模板将数组作为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}}”

因此要将其作为Array或任何javascript none值传递给您，您需要像这样在输入周围使用[] 。

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

Answer 3

通常，仅当组件嵌套在另一个组件中时才使用输入。

因此，在另一个组件中，例如： <my-component [data]= ...>