Angular 2
일반적으로 내장 된 지시문 및 서비스

소개

위치 클래스

위치 는 응용 프로그램이 브라우저의 URL과 상호 작용할 때 사용할 수있는 서비스입니다. LocationStrategy가 사용되는 위치에 따라 위치는 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