guide de style angular2 - propriété avec le signe dollar ?

Question

Les parents et les enfants communiquent via un exemple de service du guide officiel sur Angular.io utilise le signe dollar dans les noms de flux d'Observable.

Avis missionAnnounced$ et missionConfirmed$ dans l'exemple suivant :

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

@Injectable()
export class MissionService {

  // Observable string sources
  private missionAnnouncedSource = new Subject<string>();
  private missionConfirmedSource = new Subject<string>();

  // Observable string streams
  missionAnnounced$ = this.missionAnnouncedSource.asObservable();
  missionConfirmed$ = this.missionConfirmedSource.asObservable();

  // Service message commands
  announceMission(mission: string) {
    this.missionAnnouncedSource.next(mission);
  }

  confirmMission(astronaut: string) {
    this.missionConfirmedSource.next(astronaut);
  }
}

Quelqu'un peut-il expliquer :

• pourquoi $ est utilisé ? Quelle est la raison de cette notation ? Dois-je toujours l'utiliser pour les propriétés publiques ?
• les propriétés publiques sont utilisées mais pas les méthodes (par exemple missionAnnouncements(), missionConfirmations()) - encore une fois, est-ce une convention pour les applications Angular2 ?

Answer 1

$ suffixe (popularisé par Cycle.js ) est utilisé pour indiquer que la variable est une Observable . Il pourrait également être intégré au guide de style officiel, mais ce n'est pas encore le cas.

Lire la suite ici : Que signifie le signe dollar suffixé $ C'est-à-dire ?

Mise à jour : Pour en savoir plus sur le signe "$" qui suit, consultez le site Web d'Angular : https://angular.io/guide/rx-library#naming-conventions-for-observables

Answer 2

Le paradigme de nommage $, qui trouve son origine chez Andre Saltz, suggère de mettre au pluriel tous les noms de variables qui contiennent des observables ou des flux.

getAll(): Observable<Zone[]>{
    let zone$ = this.http
      .get(`${this.baseUrl}/zones`, {headers: this.getHeaders()})
      .map(mapZone);
      return zone$;
  }

Une autre approche consiste à mettre au pluriel les noms de variables qui contiennent des observables ou des flux avec un caractère unicode correspondant à la dernière lettre du mot. Cela permet de résoudre le problème des mots qui ne sont pas mis au pluriel avec un "s".

mouse$ vs mic€

Aucune de ces conventions de nommage ne figure dans le guide de style officiel d'Angular. L'utilisation de l'une ou l'autre (ou aucune) dépend entièrement des préférences personnelles.

Answer 3

Mise à jour : https://angular.io/guide/rx-library#naming-conventions-for-observables

Les applications Angular étant principalement écrites en TypeScript, vous savez généralement qu'une variable est une observable. Bien que le framework Angular n'impose pas de convention de dénomination pour les observables, vous verrez souvent des observables nommés avec un signe "$" à la fin.

Cela peut s'avérer utile lors de l'analyse du code et de la recherche de valeurs observables. De même, si vous souhaitez qu'une propriété stocke la valeur la plus récente d'une observable, il peut être pratique d'utiliser simplement le même nom avec ou sans le "$".

---

Original :

J'ai vu des variables se terminer par $ en lisant le tutoriel officiel du héros :

<div id="search-component">
  <h4>Hero Search</h4>

  <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />

  <ul class="search-result">
    <li *ngFor="let hero of heroes$ | async" >
      <a routerLink="/detail/{{hero.id}}">
        {{hero.name}}
      </a>
    </li>
  </ul>
</div>

Regardez attentivement et vous verrez que le *ngFor itère sur une liste appelée heroes$ , pas des héros .

<li *ngFor="let hero of heroes$ | async" >

Le $ est une convention qui indique que heroes$ est un Observable, et non un tableau.

Dans la plupart des cas, nous ne nous abonnons pas à ces variables Observable dans le composant. Nous utilisons généralement AsyncPipe pour nous abonner automatiquement aux variables Observable.

Je ne l'ai pas trouvé dans le Style Guide depuis qu'Angular5.1 est sorti hier (6 décembre 2017).

Answer 4

Je n'ai pas vu ça. $ dans le guide de style mais j'ai vu qu'il était fréquemment utilisé pour les propriétés publiques qui font référence à des observables auxquelles on peut souscrire.