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

【问题标题】：How can I pass an array as Input() from the component template?如何从组件模板将数组作为 Input() 传递？
【发布时间】：2016-11-05 19:20:36
【问题描述】：

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

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

但是，Angular 似乎将此视为string/string[1]（在实际项目中，数组是一个路由，我需要将此路由传递给具有[routerLink] 指令的组件）。

我该怎么做？

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

您需要用[] 包装该属性，否则Angular 根本不会处理它：

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

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

【讨论】：

【解决方案2】：

所以让我们从这里开始...在 Angular 2+ 中，如果没有括号，所有输入都将传递一个字符串...

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

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

你基本上把它理解为“[1, 2, 'test']”（作为字符串）......

你这样做的方式是传递字符串的好方法，你也可以使用插值并将其与javascript混合，然后像'Angular {{version}}'那样传递它

因此，要将其作为数组或任何 javascript 无刺值传递，您需要像这样在输入周围使用 []...

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

【讨论】：

【解决方案3】：

通常你只在组件嵌套在另一个组件中时才使用输入。

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

【讨论】：