Angular 2
Direttive e servizi comunemente incorporati

introduzione

Location Class

La posizione è un servizio che le applicazioni possono utilizzare per interagire con l'URL di un browser. A seconda di quale LocationStrategy viene utilizzata, la posizione rimarrà sul percorso dell'URL o sul segmento hash dell'URL.

La posizione è responsabile della normalizzazione dell'URL rispetto all'href di base dell'applicazione.

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

La pipe async si iscrive a Observable o Promise e restituisce l'ultimo valore che ha emesso. Quando viene emesso un nuovo valore, la pipe async contrassegna il componente da verificare per le modifiche. Quando il componente viene distrutto, la pipe asincrona si annulla automaticamente per evitare potenziali perdite di memoria.

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

Visualizzazione della versione angular2 corrente utilizzata nel progetto

Per visualizzare la versione corrente, possiamo usare VERSION dal pacchetto @ 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;
}

Tubo di valuta

Il tubo valuta consente di lavorare con i dati dell'utente come numeri normali, ma di visualizzarli con la formattazione valuta standard (simbolo di valuta, cifre decimali, ecc.) Nella vista.

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

La pipe accetta tre parametri opzionali:

• currencyCode : consente di specificare il codice valuta ISO 4217.
• symbolDisplay : booleano che indica se utilizzare il simbolo di valuta
• digitInfo : consente di specificare la modalità di visualizzazione delle posizioni decimali.

Più documentazione sul tubo valutario: https://angular.io/docs/ts/latest/api/common/index/CurrencyPipe-pipe.html