guia de estilo angular2 - propriedade com cifrão?

185

Olhando para o exemplo de código angular2 , vemos algumas propriedades públicas com o sinal $:

  <....>
  private missionAnnouncedSource = new Subject<string>();
  private missionConfirmedSource = new Subject<string>();
  // Observable string streams
  missionAnnounced$ = this.missionAnnouncedSource.asObservable();
  missionConfirmed$ = this.missionConfirmedSource.asObservable();
  <....>

Alguém pode explicar:

  • por que $ é usado (qual é a razão por trás dessa notação? sempre use isso para propriedades públicas)?
  • propriedades públicas são usadas, mas não métodos (por exemplo, missionAnnouncements (), missionConfirmations ()) - novamente, isso é uma convenção para aplicativos ng2?

Parece que não há nada sobre isso no guia oficial de estilo ?

gerasalus
fonte

Respostas:

265

O sufixo $ (popularizado pelo Cycle.js ) é usado para indicar que a variável é um Observável . Poderia chegar ao guia de estilo oficial também, mas ainda não está lá

Leia mais aqui: O que significa o sinal de cifrão com sufixo $?

Atualização: Leia mais sobre o sinal "$" à direita no site da Angular aqui: https://angular.io/guide/rx-library#naming-conventions-for-observables

Monfa.red
fonte
4
Não chegará ao guia de estilo oficial. Vou colocar 100 dólares nisso.
22618 Eric Bishard
15
Referência nos docs angulares: angular.io/guide/rx-library#naming-conventions-for-observables
michelepatrassi
66
@EricBishard Você quer dizer 100 $
TabsNotSpaces
1
e as promessas?
galki
7
segurança no emprego - torne o código mais difícil de entender para o leigo.
java-addict301
14

O paradigma de nomeação $ originou-se com Andre Saltz e sugere a pluralização de todos os nomes de variáveis ​​que contêm observáveis ​​ou fluxos.

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

Outra abordagem é pluralizar nomes de variáveis ​​que contêm observáveis ​​ou fluxos com um caractere unicode que corresponde à última letra da palavra. Isso soluciona o problema com palavras que não são pluralizadas com um "s".

mouse$ vs mic€

Nenhuma dessas convenções de nomenclatura está no guia oficial de estilo Angular. O uso de um ou de outro (ou nenhum) depende inteiramente da preferência pessoal.

Raquel Diaz
fonte
10
cactu $ vs cactï
BYTE RIDER
Boa referência! Verifique também este artigo. O que me incomoda é encontrar uma tentativa de fazer isso na minha base de código (outros colegas de trabalho) e errar, colocar o sufixo na variável errada ou, pior ainda, iniciar a variável com ela. Vi pessoas usarem isso sem consistência também, nesse caso, não faz absolutamente nenhum sentido. medium.com/@benlesh/...
Eric Bishard
Se você quiser usá-lo, recomendo seguir as convenções de nomenclatura, como neste repositório : github.com/bodiddlie/rxheroes/blob/master/app/effects/hero.ts E também fazê-lo sempre ou nunca. Seja consistente pelo bem de Deus observável.
Eric Bishard
2
fish$vsfish€$
Martin Schneider
11

Atualização : https://angular.io/guide/rx-library#naming-conventions-for-observables

Como os aplicativos angulares são geralmente escritos em TypeScript, você normalmente saberá quando uma variável é observável. Embora a estrutura Angular não imponha uma convenção de nomenclatura para observáveis, você verá frequentemente observáveis ​​nomeados com um sinal "$" à direita.

Isso pode ser útil ao verificar o código e procurar valores observáveis. Além disso, se você deseja que uma propriedade armazene o valor mais recente de um observável, pode ser conveniente simplesmente usar o mesmo nome com ou sem o "$".


Original :

Vi as variáveis ​​terminarem $ao ler o tutorial oficial do herói:

<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>

Olhe atentamente e você verá que o * ngFor itera sobre uma lista chamada heroes$, não heróis .

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

O $ é uma convenção que indica que os heróis $ são um Observável, não uma matriz.

Na maioria dos casos, não assinamos essas variáveis ​​observáveis ​​no componente. Geralmente usamos o AsyncPipe para assinar automaticamente as variáveis ​​observáveis

Não o encontrei no Style Guide desde que o Angular5.1 foi lançado ontem (6 de dezembro de 2017).

Haifeng Zhang
fonte
Do guia de estilo do Angular 9heroes: Observable<Hero[]>;
Ricardo Saracino 31/01
9

Não vi isso $no guia de estilos, mas vi que ele era usado com frequência em propriedades públicas que se referem a observáveis ​​que podem ser assinados.

Günter Zöchbauer
fonte