266

父母和孩子通过Angular.io官方指南中的服务示例进行通信，在 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 应用程序的约定吗？
4

4 回答 4

382

$ 后缀（由Cycle.js流行）用于表示该变量是一个Observable。它也可以进入官方风格指南，但还没有

在这里阅读更多：后缀的美元符号$是什么意思？

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

于 2016-06-20T17:35:22.943 回答
20

$ 命名范式起源于 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 风格指南中。一个或另一个（或没有）的使用完全取决于个人喜好。

于 2017-06-09T16:08:39.397 回答
15

更新： 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$，而不是heros 。

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

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

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

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

于 2017-12-07T22:51:09.080 回答
9

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

于 2016-06-07T06:10:37.093 回答