12 votes

refactoring du code de ChangeDetectionStrategy.Default à ChangeDetectionStrategy.OnPush

Je suis nouveau dans le domaine d'Angular après avoir passé les dernières années sur des projets de react.

J'ai un composant qui utilise changeDetection: ChangeDetectionStrategy.OnPush et je n'aime pas ma solution. Le problème, c'est que j'ai du mal à trouver de bons exemples concrets d'utilisation de la technologie de l'information. ChangeDetectionStrategy.OnPush

Par exemple, j'ai un composant un peu comme ceci :

  files: Uploads[] = [];

  get canUpload() {
    return this.files.length > 0l
  }

  get isUploading() {
    return this.files.length > 0 && this.files.some((f) => f.state === FileUpLoadState.uploading);
  }

  get activeFiles() {
    return this.files.filter((f) => f.state !== FileUpLoadState.success);
  }

  uploadFiles() {
    if (!this.files.length) {
      return;
    }

    const fileList: FileList = (event.target as HTMLInputElement).files;

    for (const uploadedFile of Array.prototype.slice.call(fileList)) {
      // do stuff
      this.files.push(new Upload(file));
    }

  }

J'ai ces propriétés qui sont utilisées dans le modèle comme ceci ;

 <button (click)="uploadFiles()" [disabled]="!this.canUpload">Upload</button>

Je n'aime vraiment pas cela, l'utilisation de la détection des changements par défaut n'évoluera pas et le moment où les changements sont propagés est hors de mon contrôle.

Comment puis-je remanier ce code pour utiliser la détection de changement OnPush ?

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X