Come posso passare un array come Input() dal modello del componente?

Question

Ho bisogno di passare un array di valori a un componente usando il binding, ad es.

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

Tuttavia, sembra tratta angolari questo come string/string[1] (nel progetto attuale la matrice è un percorso e ho bisogno di passare questo percorso su di un componente che ha la direttiva [routerLink]).

Come faccio a fare questo?

Answer 1

È necessario avvolgere la proprietà con [] altrimenti non viene elaborata da angolare a tutti:

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

Il vostro esempio sembra fissare data dall'interno del componente. Non è così che funziona il binding. Quello che puoi fare con il tuo componente è <my-component [data]="[1, 2, 'test']"></my-component> per passare i dati dall'esterno al tuo componente.

Answer 2

Normalmente si utilizza solo l'input quando il componente è nidificato all'interno di un altro componente.

Quindi, in un altro componente, qualcosa di simile a: <my-component [data]= ...>

Answer 3

così lascia Cominciamo da qui ... in angolare 2+ tutti gli input passerà giù una stringa se non ottengono parentesi intorno ...

Quindi ci sono 2 modi per passare i vostri valori ...

se si scrive così: '<div data="[1, 2, 'test']"'

che, fondamentalmente, ottiene come "[1, 2, 'test']" (Come stringa) ...

Il modo in cui stai facendo è un buon modo per far passare le stringhe , e si può anche usare l'interpolazione e mescolare con javascript prima di passarlo giù come 'angolare {{version}}'

Quindi, per tramandarlo come un array o qualsiasi JavaScript nessuno-sting valore, è necessario utilizzare [] intorno al vostro ingresso in questo modo ...

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