Angular 2
Vanligtvis inbyggda direktiv och tjänster

Introduktion

Platsklass

Plats är en tjänst som applikationer kan använda för att interagera med webbläsarens URL. Beroende på vilken LocationStrategy som används kommer Location att antingen fortsätta till URL: s sökväg eller URL: s hash-segment.

Plats ansvarar för att normalisera URL: en mot applikationens bashref.

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

Async-röret prenumererar på ett observerbart eller lovande och returnerar det senaste värdet som det har avgivit. När ett nytt värde avges markerar asyncröret komponenten som ska kontrolleras för ändringar. När komponenten förstörs avslutar asyncröret sig automatiskt för att undvika potentiella minnesläckor.

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

Visar aktuell version av angular2 som används i ditt projekt

För att visa aktuell version kan vi använda VERSION från @ angular / core-paketet.

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

Valutarör

Valutapipet gör att du kan arbeta med dig som vanliga nummer men visa dem med standardvalutaformatering (valutasymbol, decimaler etc.) i vyn.

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

Röret tar tre valbara parametrar:

• currencyCode : Gör att du kan ange valutakoden ISO 4217.
• symbolDisplay : Boolean som anger om valutasymbolen ska användas
• digitInfo : Gör att du kan ange hur decimalerna ska visas.

Mer dokumentation om valutapipet: https://angular.io/docs/ts/latest/api/common/index/CurrencyPipe-pipe.html