Angular 2
Directivas y servicios comúnmente incorporados.
Buscar..
Introducción
Clase de ubicación
La ubicación es un servicio que las aplicaciones pueden usar para interactuar con la URL de un navegador. Dependiendo de la LocationStrategy que se use, la ubicación permanecerá en la ruta de la URL o en el segmento de hash de la URL.
La ubicación es responsable de normalizar la URL contra la base href de la aplicación.
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 tubería asíncrona se suscribe a un Observable o Promesa y devuelve el último valor que ha emitido. Cuando se emite un nuevo valor, el conducto asíncrono marca el componente que se debe verificar para detectar cambios. Cuando el componente se destruye, la tubería asíncrona se cancela automáticamente para evitar posibles pérdidas de 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);
});
}
Visualizando la versión angular2 utilizada en tu proyecto.
Para mostrar la versión actual, podemos usar VERSION del paquete @ 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;
}
Pipa de la moneda
La canalización de moneda le permite trabajar con sus datos como números regulares pero mostrarlos con el formato de moneda estándar (símbolo de moneda, decimales, etc.) en la 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;
}
El tubo lleva tres parámetros opcionales:
- currencyCode : le permite especificar el código de moneda ISO 4217.
- symbolDisplay : booleano que indica si se debe utilizar el símbolo de moneda
- digitInfo : le permite especificar cómo deben mostrarse los lugares decimales.
Más documentación sobre la tubería de divisas: https://angular.io/docs/ts/latest/api/common/index/CurrencyPipe-pipe.html