Salut, afin d'empêcher l'utilisateur d'éditer plusieurs composants en même temps, j'ai créé un service qui permet de gérer cet état. En gros, l'idée est de récupérer le composant au moment où il entre en mode édition (cf le code)

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StateService {
  // Composant en édition actuellement
  editing = undefined;

  constructor() { }

}

J'injecte ce service dans chaque composant. Lorsqu'on clique sur le bouton "Editer" d'un composant, on l'affecte en tant que valeur de 'editing'. Lorsque l'édition prends fin, 'editing' redevient undefined.

Dans les templates, je gère l'affichage des bouton avec la directive ngIf. Exemple:

*ngIf="!stateService.editing || stateService.editing === this"

Si editing est undefined OU que sa valeur est le composant courant, on peut cliquer. Dans tous les autres cas, un autre composant est en mode édition, on ne peut donc pas l'éditer

Mais il y a des limites à cette façon de procéder:

La plupart du temps, mes composants sont dans une directive ngFor:

<app-item *ngFor="let item of items">
   <button *ngIf="
     !stateService.editing || 
     stateService.editing === this"
     (click)="edit()"></button>
</app-item>

La fonction edit ressemble à ça:

constructor(public stateService: StateService){}

// ...

edit(){
 this.stateService.editing = this
}

Dans ce cas-là, si j'ajoute un item à ma liste "items" et que je veux le mettre directement en mode édition à sa création, je ne peux pas puisque je n'y ai pas accès avant d'avoir cliqué sur le bouton pour appeler la fonction edit.

Je ne trouve pas de bonne logique, auriez-vous une idée ?

-
Edité par 01001011 16 septembre 2021 à 11:04:46