Angular 2
一般に組み込まれた指令およびサービス

前書き

ロケーションクラス

場所は、アプリケーションがブラウザのURLと対話するために使用できるサービスです。どのLocationStrategyが使用されているかに応じて、LocationはURLのパスまたはURLのハッシュセグメントに保持されます。

Locationは、アプリケーションのベースhrefに対してURLを正規化する役割を担います。

import {Component} from '@angular/core';
import {Location} from '@angular/common';

@Component({
    selector: 'app-component'
})
class AppCmp {

  constructor(_location: Location) {

    //Changes the browsers URL to the normalized version of the given URL, 
    //and pushes a new item onto the platform's history.
    _location.go('/foo');

  }

  backClicked() {
    //Navigates back in the platform's history.
    this._location.back();
  }

  forwardClicked() {
    //Navigates forward in the platform's history.
    this._location.back();
  }
}

AsyncPipe

非同期パイプはObservableまたはPromiseにサブスクライブし、発行した最新の値を返します。新しい値が発行されると、非同期パイプは変更があるかどうかをチェックするコンポーネントをマークします。コンポーネントが破棄されると、非同期パイプは自動的にサブスクリプションを解除し、潜在的なメモリリークを回避します。

@Component({
  selector: 'async-observable-pipe',
  template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
})
export class AsyncObservablePipeComponent {
  time = new Observable<string>((observer: Subscriber<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}

あなたのプロジェクトで使用されている現在のangular2バージョンを表示する

現在のバージョンを表示するには、@ angular / coreパッケージのVERSIONを使用できます。

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <h2>Current Version: {{ver}}</h2>
  `,
})
export class AppComponent  {
   name = 'Angular2'; 
   ver = VERSION.full;
}

通貨パイプ

通貨パイプを使用すると、通常の通貨としてデータを扱うことができますが、通貨の書式（通貨記号、小数点など）を表示することができます。

@Component({
  selector: 'currency-pipe',
  template: `<div>
    <p>A: {{myMoney | currency:'USD':false}}</p>
    <p>B: {{yourMoney | currency:'USD':true:'4.2-2'}}</p>
  </div>`
})
export class CurrencyPipeComponent {
  myMoney: number = 100000.653;
  yourMoney: number = 5.3495;
}

パイプには3つのオプションのパラメータがあります。

• currencyCode ：ISO 4217通貨コードを指定できます。
• symbolDisplay ：通貨記号を使用するかどうかを示すブール値
• digitInfo ：小数点の表示方法を指定できます。

通貨パイプに関するその他のドキュメント： https : //angular.io/docs/ts/latest/api/common/index/CurrencyPipe-pipe.html