如何從組件模板將數組作為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]= ...>