Angular 2
Powszechnie wbudowane dyrektywy i usługi

Wprowadzenie

Klasa lokalizacji

Lokalizacja to usługa, z której aplikacje mogą korzystać w celu interakcji z adresem URL przeglądarki. W zależności od zastosowanej strategii LocationStrategy lokalizacja zachowa ścieżkę adresu URL lub segment skrótu adresu URL.

Lokalizacja jest odpowiedzialna za normalizację adresu URL względem podstawowego href aplikacji.

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

Potok asynchroniczny subskrybuje Observable lub Promise i zwraca ostatnią emitowaną wartość. Gdy emitowana jest nowa wartość, potok asynchroniczny oznacza komponent, który należy sprawdzić pod kątem zmian. Gdy komponent zostanie zniszczony, potok asynchroniczny automatycznie anuluje subskrypcję, aby uniknąć potencjalnych wycieków pamięci.

@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);
  });
}

Wyświetlanie aktualnej wersji angular2 używanej w twoim projekcie

Aby wyświetlić aktualną wersję, możemy użyć WERSJI z pakietu @ angular / core.

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;
}

Rura walutowa

Rura walutowa umożliwia pracę z danymi w postaci zwykłych liczb, ale wyświetlanie ich ze standardowym formatowaniem waluty (symbol waluty, miejsca dziesiętne itp.) W widoku.

@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;
}

Rura przyjmuje trzy opcjonalne parametry:

• currencyCode : Umożliwia określenie kodu waluty ISO 4217.
• symbolDisplay : Boolean wskazujący, czy użyć symbolu waluty
• digitInfo : Umożliwia określenie sposobu wyświetlania miejsc dziesiętnych.

Więcej dokumentacji na temat potoku walutowego: https://angular.io/docs/ts/latest/api/common/index/CurrencyPipe-pipe.html