Angular 2
Häufig eingebaute Richtlinien und Dienste

Einführung

Standortklasse

Location ist ein Dienst, den Anwendungen zur Interaktion mit der Browser-URL verwenden können. Abhängig davon, welche LocationStrategy verwendet wird, verbleibt Location entweder am Pfad der URL oder am Hash-Segment der URL.

Der Standort ist für die Normalisierung der URL gegenüber der Basis-Href der Anwendung verantwortlich.

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

Die async-Pipe abonniert ein Observable oder Promise und gibt den neuesten Wert zurück, den sie ausgegeben hat. Wenn ein neuer Wert ausgegeben wird, markiert die asynchrone Pipe die Komponente, die auf Änderungen geprüft werden soll. Wenn die Komponente zerstört wird, wird die asynchrone Pipe automatisch abbestellt, um mögliche Speicherlecks zu vermeiden.

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

Anzeige der aktuellen Version von angle2, die in Ihrem Projekt verwendet wird

Zur Anzeige der aktuellen Version können Sie VERSION aus dem @ eckig / core-Paket verwenden.

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

Währungsrohr

Mit der Währungspipe können Sie mit Ihren Daten als reguläre Zahlen arbeiten, diese jedoch mit der Standardwährungsformatierung (Währungssymbol, Dezimalstellen usw.) in der Ansicht anzeigen.

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

Das Rohr hat drei optionale Parameter:

• Währungscode : Ermöglicht die Angabe des Währungscodes nach ISO 4217.
• symbolDisplay : Boolescher Wert, der angibt, ob das Währungssymbol verwendet werden soll
• digitInfo : Hier können Sie angeben, wie die Dezimalstellen angezeigt werden sollen.

Weitere Informationen zur Currency Pipe: https://angular.io/docs/ts/latest/api/common/index/CurrencyPipe-pipe.html