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

Question

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

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

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

我该怎么处理？

- Thorsten Westheider

Answer 1

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

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

您的示例似乎是在组件内部设置data。这不是绑定的工作方式。您可以使用以下代码将数据从外部传递到组件中：<my-component [data]="[1, 2, 'test']"></my-component>

- Günter Zöchbauer

Answer 2

所以让我们从这里开始... 在 Angular 2+ 中，如果没有用方括号包裹，所有的输入都将作为字符串传递...

因此，有两种方式来传递您的值...

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

你基本上会得到它作为 "[1, 2, 'test']"（字符串）...

你现在使用的方式是传递字符串的好方法，而且你还可以在传递之前使用插值和混合javascript，比如 'Angular {{version}}'。

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

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

- Alireza

Answer 3

通常情况下，只有在组件嵌套在另一个组件中时才使用input。

因此，在另一个组件中，类似于：<my-component [data]= ...>。

- DeborahK