angular2 스타일 가이드-달러 기호가있는 속성?


185

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 앱의 규칙입니까?

공식 스타일 가이드 에 이것 관한 것이없는 것 같 습니까?

답변:


265

변수가 Observable 임을 나타 내기 위해 $ 접미사 ( Cycle.js에 의해 대중화 )가 사용됩니다 . 공식 스타일 가이드로 만들 수도 있지만 아직 없습니다.

자세한 내용은 여기를 참조하십시오 : 접미사 달러 기호 $는 무엇을 의미합니까?

업데이트 : Angular 웹 사이트에서 "$"기호에 대한 자세한 내용은 여기 ( https://angular.io/guide/rx-library#naming-conventions-for-observables)를 참조 하십시오.


4
공식적인 스타일 가이드에는 적용되지 않습니다. 나는 그것에 100 달러를 넣을 것이다.
Eric Bishard


66
당신은 100 $ 평균 @EricBishard
TabsNotSpaces

1
약속은 어떻습니까?
galki

7
직업 보안-평신도를 위해 코드를 이해하기 어렵게 만듭니다.
java-addict301

14

$ 명명 패러다임은 Andre Saltz에서 시작되었으며 관찰 가능 항목 또는 스트림이 포함 된 모든 변수 이름을 복수화 할 것을 제안합니다.

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

또 다른 방법은 관측 가능 항목 또는 단어의 마지막 문자와 일치하는 유니 코드 문자를 가진 스트림을 포함하는 변수 이름을 복수화하는 것입니다. 이것은 "s"로 복수화되지 않은 단어로 문제를 해결합니다.

mouse$ vs mic€

이러한 명명 규칙 중 어느 것도 공식 Angular 스타일 가이드에 없습니다. 하나 또는 다른 것을 사용하거나 전혀 사용하지 않는 것은 전적으로 개인 취향에 달려 있습니다.


10
cactu $ vs cactï
BYTE RIDER

좋은 참조! 이 기사도 확인하십시오. 내가 짜증나는 것은 내 코드베이스 (다른 동료) 에서이 작업을 시도하고 잘못하여 접미사를 잘못된 변수에 넣거나 변수를 더 잘못 시작하는 것입니다. 나는 사람들이 일관성없이 이것을 사용하는 것을 보았습니다.이 경우 완전히 의미가 없습니다. medium.com/@benlesh/…
Eric Bishard

그것을 사용하려면이 리포지토리 와 같은 명명 규칙을 따르는 것이 좋습니다 : github.com/bodiddlie/rxheroes/blob/master/app/effects/hero.ts 또한 항상 또는 절대로하지 마십시오. 관찰 가능한 신을 위해 일관성을 유지하십시오.
Eric Bishard

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 $가 배열이 아니라 Observable임을 나타내는 규칙입니다.

대부분의 경우 컴포넌트에서 Observable 변수를 구독하지 않는 경우가 있습니다. 우리는 보통 AsyncPipe를 사용하여 Observable 변수를 자동으로 구독합니다.

Angular5.1이 어제 릴리스 된 이후 스타일 가이드에서 찾지 못했습니다 (2017 년 12 월 6 일).


Angular 9 스타일 가이드에서heroes: Observable<Hero[]>;
Ricardo Saracino

9

나는 $스타일 가이드에서 이것을 보지 못했지만 구독 할 수있는 관찰 가능 항목을 참조하는 공공 재산에 자주 사용되는 것을 보았습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.