Servicios

Los componentes de angular son construídos cuando son renderizados en pantalla y generalmente son destruídos cuando el usuario navega hacia otra sección de la aplicación.

Es práctica común entonces no utilizar los componentes para almacenar estado sino extraer el mismo, junto con las operaciones para recuperarlo y transformarlo, en un servicio. Un servicio puede ser compartido entre varios componentes para lograr así compartir estado entre los mismos.

Nosotros necesitamos hoy compartir estado de forma que el componente NewPostComponent pueda crear una nueva noticia en la misma lista que AppComponent recorre y muestra.

Crearemos para ello un nuevo archivo post.service.js.

src/frontend/app/service/post.service.js

import { Injectable } from '@angular/core'; @Injectable() export default class PostService { }

Luego agregamos en dicho servicio el código para contener la lista mock de noticias y agregar una nueva noticia a tal lista mock.

src/frontend/app/service/post.service.js

import { Injectable } from '@angular/core'; @Injectable() export default class PostService { constructor() { this._posts = [ { title: 'Noticia 1', content: 'Contenido 1', author: 'Claudio', upvotes: 1 }, { title: 'Noticia 2', content: 'Contenido 2', author: 'Claudio', upvotes: 3 }, { title: 'Noticia 3', content: 'Contenido 3', author: 'Claudio', upvotes: 0 } ] } get posts() { return this._posts } create(post) { this._posts.push(post) } }

Ahora solo nos resta modificar AppComponent para que tome la lista de posts de este servicio en lugar de construírla.

src/frontend/app/component/app.component.js

import { Component } from '@angular/core'; import PostService from '../services/post.service'; @Component({ selector: 'app-view', template: `<h1>Bienvenidos a {{name}}</h1> <post *ngFor="let item of posts" [data]="item"></post> <newPost></newPost>`, providers: [ PostService ] }) export default class AppComponent { constructor(postService) { this.name = 'Noticias UNQ', this.posts = postService.posts; } } AppComponent.parameters = [ PostService ]

Es importante notar que el servicio no es instanciado por nosotros sino que es provisto a nuestro componente por medio del constructor. Para que esta inyección de dependencias funcione tuvimos que agregar:

AppComponent.parameters = [
  PostService
]

Lo cual básicamente instruye a angular de cuales son los tipos de los componentes a inyectar en los parametros del constructor. Además debimos agregar providers: [ PostService ] a la metadata especificando que providers existen para dichos tipos.

Luego, para que el sistema esté completo simplemente modificamos NewPostComponent para recibir dicho servicio y utilizarlo para crear nuevas noticias.

src/frontend/app/component/newPost.component.js

... export default class NewPostComponent { constructor(postService) { this.data = {} this.postService = postService } onSubmit() { this.postService.create(this.data) this.data = {} } } NewPostComponent.parameters = [ PostService ]

Al igual que en AppComponent en este componente el servicio PostService es inyectado por medio del constructor. Para que esto pueda pasar debemos especifica que el parametro del constructor es de tipo PostService por medio de la metadata.

Si probamos nuevamente la app en el browser notaremos que al crear una noticia inmediatamente el cambio se ve reflejado en la lista de elementos mostrada.

GitHub

results matching ""

    No results matching ""