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

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

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

Answer 3

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

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

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

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

你这样做是传递字符串的好方法，你也可以使用插值并将它与javascript混合，然后像[=一样传递它30=]

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

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

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

How can I pass an array as Input() from the component template?

angular2-template

angular