angular2 風格指南 - 帶有美元符號的屬性？

Question

父母和孩子通過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 應用程序的約定嗎？

Answer 1

$ 后綴（由Cycle.js流行）用於表示變量是一個Observable 。 它也可以進入官方風格指南，但還沒有

在此處閱讀更多信息： 后綴美元符號$是什么意思？

更新：在此處閱讀有關 Angular 網站上尾隨“$”符號的更多信息： https : //angular.io/guide/rx-library#naming-conventions-for-observables

Answer 2

$ 命名范式起源於 Andre Saltz，並建議將所有包含 observable 或流的變量名稱復數化。

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

另一種方法是使用與單詞的最后一個字母匹配的 unicode 字符將包含 observable 或流的變量名稱復數化。 這解決了沒有用“s”復數的單詞的問題。

mouse$ vs mic€

這些命名約定都沒有出現在官方的 Angular 風格指南中。 使用其中之一（或不使用）完全取決於個人喜好。

Answer 3

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

因為 Angular 應用程序大多是用 TypeScript 編寫的，所以您通常會知道變量何時是可觀察的。 盡管 Angular 框架沒有強制執行 observable 的命名約定，但您經常會看到以尾隨“$”符號命名的 observable。

這在掃描代碼和查找可觀察值時很有用。 此外，如果您希望屬性存儲來自 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 遍歷名為 hero heroes$的列表，而不是heros 。

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

$ 是一個約定，表示 hero$ 是一個 Observable，而不是一個數組。

大多數情況是我們沒有訂閱組件中的那些 Observable 變量。 我們通常使用 AsyncPipe 自動訂閱 Observable 變量

自從 Angular5.1 昨天（2017 年 12 月 6 日）發布以來，我還沒有在 Style Guide 中找到它。

Answer 4

我沒有在樣式指南中看到這個$ ，但我看到它經常用於引用可以訂閱的 observable 的公共屬性。