angular2 风格指南 - 带有美元符号的属性？

Question

Parent and children communicate via a service example from the official guide on Angular.io makes use of dollar signs in Observable stream names.

Notice missionAnnounced$ and missionConfirmed$ in the following example:

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);
  }
}

Can anyone explain:

• why $ is used? What's the reason behind this notation? Do I always need to use this for public properties?
• public properties are used but not methods (eg missionAnnouncements(), missionConfirmations()) - again, is this a convention for Angular2 apps?

Answer 1

$ suffix (popularized by Cycle.js ) is used to indicate that the variable is an Observable . It could make it to the official style guide too but it's not there yet

Read more here : What does the suffixed dollar sign $ mean?

Update: Read more about the trailing “$” sign on Angular website here: https://angular.io/guide/rx-library#naming-conventions-for-observables

Answer 2

The $ naming paradigm originated with Andre Saltz and suggests pluralizing all variable names that contain observables or streams.

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

Another approach is to pluralize variable names that contain observables or streams with a unicode character that matches the last letter of the word. This addresses the issue with words that aren't pluralized with an "s".

mouse$ vs mic€

Neither of these naming conventions are in the official Angular style guide. Usage of one or the other (or none) is entirely dependent on personal preference.

Answer 3

Update : https://angular.io/guide/rx-library#naming-conventions-for-observables

Because Angular applications are mostly written in TypeScript, you will typically know when a variable is an observable. Although the Angular framework does not enforce a naming convention for observables, you will often see observables named with a trailing “$” sign.

This can be useful when scanning through code and looking for observable values. Also, if you want a property to store the most recent value from an observable, it can be convenient to simply use the same name with or without the “$”.

---

Original :

I saw variables end with $ when reading the official hero tutorial:

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

Look closely and you'll see that the *ngFor iterates over a list called heroes$ , not heroes .

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

The $ is a convention that indicates heroes$ is an Observable, not an array.

Most cases are that we do not subscribe to those Observable variables in component. We usually use AsyncPipe to subscribe to the Observable variables automatically

I haven't found it in Style Guide since Angular5.1 has released yesterday(December 6th, 2017).

Answer 4

我没有在样式指南中看到这个$ ，但我看到它经常用于引用可以订阅的 observable 的公共属性。