Как передать массив как Input() из шаблона компонента?

Мне нужно передать массив значений компоненту, используя привязку, например

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

Однако, кажется, что Angular рассматривает это как string/string[1] (в фактическом проекте массив является маршрутом, и мне нужно передать этот маршрут на компонент, который имеет директиву [routerLink]).

Как мне это сделать?

Ответ 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]= ...>