angular2样式指南-具有美元符号的属性?


184

看一下angular2代码示例,我们看到一些带有$符号的公共属性:

  <....>
  private missionAnnouncedSource = new Subject<string>();
  private missionConfirmedSource = new Subject<string>();
  // Observable string streams
  missionAnnounced$ = this.missionAnnouncedSource.asObservable();
  missionConfirmed$ = this.missionConfirmedSource.asObservable();
  <....>

谁能解释:

  • 为什么使用$(此符号背后的原因是什么?始终将其用于公共财产)?
  • 使用公共属性,但不使用方法(例如,missionAnnouncements(),missionConfirmations())-同样,这是ng2应用的约定吗?

官方样式指南中似乎没有关于此的任何内容?

Answers:


265

$后缀(由Cycle.js填充)用于指示该变量是Observable。它也可以进入官方样式指南,但还不存在

在此处阅读更多:带后缀的美元符号$是什么意思?

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


4
它不会进入官方样式指南。我付那一百美元。
Eric Bishard


64
@EricBishard您的意思是100 $
TabsNotSpaces 18/12/12

1
那诺言呢?
加尔基

7
工作安全性-使外行人员更难以理解代码。
java-addict301

14

$命名范例起源于安德烈·萨尔茨(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样式指南中都没有这两种命名约定。使用其中一个(或不使用)完全取决于个人喜好。


10
CACTU $ VS仙人掌
BYTE RIDER

不错的参考!另请参阅本文。令我烦恼的是尝试在我的代码库(其他同事)中尝试执行此操作并弄错了,将后缀放在错误的变量上,甚至更糟的是用它来启动变量。我已经看到人们也没有一致性地使用它,在这种情况下,这完全没有意义。 medium.com/@benlesh/…–
埃里克·

如果您要使用它,我将建议遵循以下仓库中的命名约定:github.com/bodiddlie/rxheroes/blob/master/app/effects/hero.ts 并始终或永远不要这样做。为了可观察的上帝,要保持一致。
埃里克·比斯哈德

2
fish$vsfish€$
Martin Schneider

11

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

由于Angular应用程序大多数是用TypeScript编写的,因此通常您会知道变量何时是可观察的。尽管Angular框架没有对可观察对象强制执行命名约定,但您经常会看到可观察对象以尾随“ $”符号命名。

这在扫描代码并查找可观察的值时很有用。另外,如果您希望属性存储可观察到的最新值,则可以方便地使用带有或不带有“ $”的相同名称。


原件

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

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

$是一个约定,表示heroes $是可观察的,而不是数组。

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

自Angular5.1昨天(2017年12月6日)发布以来,我尚未在样式指南中找到它。


从角9风格指南heroes: Observable<Hero[]>;
里卡多Saracino

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.