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

Question

Parent and children communicate via a service example from the official guide on 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);
  }
}

谁能解释一下：

为什么使用$？这个符号背后的原因是什么？我是否总是需要将其用于 public 属性？
public 使用了属性但没有使用方法（例如 missionAnnouncements()、missionConfirmations()）——再次强调，这是 Angular2 应用程序的惯例吗？

Answer 1

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

Answer 2

$ 后缀（由 Cycle.js) is used to indicate that the variable is an Observable 推广。它也可以进入官方风格指南，但目前还没有

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

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

Answer 3

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

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

另一种方法是将包含可观察对象或流的变量名称复数化，并使用与单词最后一个字母匹配的 unicode 字符。这解决了未使用 "s".

进行复数化的单词的问题

mouse$ vs mic€

官方 Angular 风格指南中均未包含这些命名约定。一种或另一种（或none）的使用完全取决于个人喜好。

Answer 4

更新: 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 “$”.

原文:

看官方英雄教程的时候看到变量以$结尾：

<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$ 的列表，不是 heroes。

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

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

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

Angular5.1 昨天（2017 年 12 月 6 日）发布后，我还没有在风格指南中找到它。

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

angular2 style guide - property with dollar sign?

angular2-observables

angular

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

angular2 style guide - property with dollar sign?

angular2-observables

angular

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