Je travaille sur une application Angular où j'ai créé un composant appelé TripSummaryComponent que j'utilise pour afficher les informations de voyage de cette façon:

<div *ngFor="let trip of trips">
    <trip-summary [trip]="trip"></trip-summary>
</div>

entrez la description de l'image ici Maintenant, mon besoin est: comment identifier chaque instance de TripSummaryComponent par un identifiant unique après sa génération dans le DOM.

Merci d'avance pour votre aide.

0
Ghassen 23 oct. 2020 à 23:47

2 réponses

Meilleure réponse

Je ne recommanderais pas de transmettre un identifiant via une entrée au composant enfant. Pourquoi ne pas en créer directement un dans le composant enfant lui-même via un générateur UUID (que vous devez fournir avec une bibliothèque tierce, par exemple générateur d'uuid):

Composante

readonly id: string;

ngOnInit() {
  this.id = uuid.v4();
}

Modèle

<div [attr.id]="id">
  <!-- rest of the template -->
</div>
1
Marek W 24 oct. 2020 à 09:41

J'ai une idée: bien sûr, je ne le recommande vraiment pas. Mais cela peut être fait.

Utilisez ViewChildren et QueryList

Identifiez chaque instance de TripSummaryComponent

Ajoutez un idGenerator() qui renvoie toujours un identifiant unique

par un identifiant unique

À l'intérieur de ngAfterViewInit ()

après qu'il soit généré dans le DOM.

Exigences

Ajouter une entrée id au composant de résumé de voyage

@Input() trip
@Input() id

Obtenir des références de composants de résumé de voyage

Utilisez ViewChildren et QueryList pour avoir toutes les références de composants.

@ViewChildren(TestComponent) testQueryList: QueryList<TestComponent>;

  trip = [
    { id: "1", name: "one" },
    { id: "2", name: "two" },
    { id: "3", name: "three" }
  ];

  ngAfterViewInit() {
    this.testQueryList.forEach(component => console.log(component));
    this.cd.detectChanges();
  }

Ajouter un identifiant unique aux composants de résumé de voyage dans ngAfterViewInit

ngAfterViewInit() {
  this.testQueryList.forEach((component, index) => component.id = this.generateUniqueId());
}

private generateUniqueId(): string {
  return 'here should return unique id'
}

Résultat

Chaque instance de composants a un identifiant unique

Exemple de travail : https://stackblitz.com/edit/angular-ivy-r6qlkm?file=src%2Fapp%2Fapp.component.ts

0
Luis Reinoso 24 oct. 2020 à 04:03