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

Question

Angular.io 官方指南中的Parent and children communicate via a service example 在 Observable 流名称中使用美元符号。

注意以下示例中的missionAnnounced$ 和missionConfirmed$：

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

谁能解释一下：

• 为什么使用$？这个符号背后的原因是什么？我是否总是需要将其用于公共财产？
• 使用了公共属性，但没有使用方法（例如，missionAnnouncements()、missionConfirmations()） - 同样，这是 Angular2 应用程序的约定吗？

Answer 1

$后缀（通俗化为Cycle.js）用于表示变量为Observable。 它也可以进入官方风格指南，但还没有

在此处阅读更多信息：What does the suffixed dollar sign $ mean?

更新： 在此处阅读有关 Angular 网站上尾随“$”符号的更多信息： https://angular.io/guide/rx-library#naming-conventions-for-observables

Answer 2

$ 命名范式起源于 Andre Saltz，建议将所有包含可观察对象或流的变量名称复数化。

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

另一种方法是将包含 observables 或流的变量名称复数化，其 unicode 字符与单词的最后一个字母匹配。这解决了不使用“s”复数的单词的问题。

mouse$ vs mic€

这些命名约定都没有出现在官方的 Angular 风格指南中。使用其中一种（或不使用）完全取决于个人喜好。

Answer 3

更新： https://angular.io/guide/rx-library#naming-conventions-for-observables

因为 Angular 应用程序大多是用 TypeScript 编写的，所以您通常会知道变量何时是可观察的。尽管 Angular 框架不强制执行 observables 的命名约定，但您经常会看到 observables 以结尾的“$”符号命名。

这在扫描代码和寻找可观察值时很有用。此外，如果您希望一个属性存储来自 observable 的最新值，只需使用带有或不带“$”的相同名称会很方便。

---

原创：

我在阅读官方英雄教程时看到变量以$结尾：

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

仔细观察，您会发现 *ngFor 遍历了一个名为 heroes$ 的列表，不是英雄。

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

$ 是一个约定，表明 heros$ 是一个 Observable，而不是一个数组。

大多数情况是我们不订阅组件中的那些 Observable 变量。我们通常使用 AsyncPipe 来自动订阅 Observable 变量

自从 Angular5.1 昨天（2017 年 12 月 6 日）发布以来，我还没有在 Style Guide 中找到它。

Answer 4

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