Comment puis-je passer un tableau en tant Qu'Input() à partir du modèle de Composant?
J'ai besoin de passer un tableau de valeurs à un composant en utilisant la liaison, par exemple
@Component({
selector: 'my-component',
template: '<div data="[1, 2, 'test']"></div>
})
export class MyComponent {
@Input() data: any[];
...
}
Cependant, il semble Angulaire traite cela comme string/string[1] (dans le projet, le tableau est une route, et j'ai besoin de passer cette route sur un composant qui a la [routerLink] "directive").
Comment puis-je aller à ce sujet?
3 réponses
Vous devez envelopper la propriété avec [] sinon elle n'est pas traitée par Angular du tout:
[data]="[1, 2, 'test']"
Votre exemple semble définir data depuis l'intérieur du composant. Ce n'est pas ainsi que la liaison fonctionne. Ce que vous pouvez faire avec votre composant est <my-component [data]="[1, 2, 'test']"></my-component> pour transmettre des données de l'extérieur à votre composant.
Commençons donc à partir d'ici... dans Angular 2 + toutes les entrées passeront une chaîne si elles ne reçoivent pas de crochets...
Il y a Donc 2 façons de transmettre vos valeurs...
Si vous l'écrire comme ceci: '<div data="[1, 2, 'test']"'
Vous l'obtenez essentiellement comme "[1, 2, 'test'] " (en tant que chaîne)...
La façon dont vous faites est un bon moyen de transmettre strings , et vous pouvez également utiliser l'interpolation et la mélanger avec javascript avant de la transmettre comme ' Angular {{version}}'
Donc, pour le transmettre sous forme de tableau ou de toute valeur JavaScript none-sting, vous devez utiliser [] autour de votre entrée comme ceci...
<div [data]="[1, 2, 'test']"></div>
Normalement, vous n'utilisez input que lorsque le composant est imbriqué dans un autre composant.
, Donc dans un autre composant, quelque chose comme: <my-component [data]= ...>