le component de base

Le component Post est le composant de base de notre développement puisque c’est l’unité d’information qui sera demandée au serveur. Partons du code généré par Ionic :

import { Component } from '@angular/core';
/**
 * Generated class for the PostComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'post',
  templateUrl: 'post.html'
})
export class PostComponent {
  text: string;
  constructor() {
    console.log('Hello PostComponent Component');
    this.text = 'Hello World';
  }
}


nous allons déjà ajouter à notre class une interface à laquelle elle doit répondre puisque nous allons utiliser une fonction du cycle de vie du component. Cette fonction sera appelée à l’initialisation du component et s’appelle donc ngOnInit. Modifions notre code d’import en conséquence :
import { Component, OnInit, Input } from '@angular/core';

Puis implémentons l’interface :

export class Post implements OnInit {

L’ajout de implements à notre class indique quelle se conformera bien à la définition de l’interface. Pour que cela soit bien le cas, il nous faut ajouter la méthode adéquate dans le corps de la class.

ngOnInit() {
  this.getSinglePost();
}

Nous appellerons donc la méthode getSinglePost à chaque initialisation du component. Voyons donc cette méthode qui récupérera le contenu du post.

Récupérons un Post

getSinglePost() {
  this.postService
    .getPost( this.SinglePostId, 'posts' )
    .subscribe(
      res => {
        this.post = res;
      },
      error => {
        this.error = error;
      }
    );
}

Cette méthode utilise le service que nous avons définit précédemment et souscrit donc à l’observable getPost afin de récupérer le flux de données qui constitue notre Post. Ce service a été bien sûr passé au constructeur de la class afin d’être disponible pour la méthode. Vous remarquez aussi que getPost reçoit comme argument une variable SinglePostId. Cette variable est transmise grâce à un @Input que nous allons définir en tête de notre class. Cette variable permettra de pouvoir charger n’importe quel Post directement afin de l’afficher seul et surtout d’y accéder par une URL directe sur le site.

@Input() SinglePostId: number;

Ajoutons aussi les autres propriétés de notre class :

error: any;
post = {
  title: {
    rendered: ""
  },
  excerpt: {
    rendered: ""
  },
  content: {
    rendered: ""
  },
  categories: {
    0: 0
  },
  date: "",
  data: {
    status: 0
  }
}


Ainsi nous initialisons la variable post qui reprend la structure définie dans le provider afin d’éviter le renvoie d’une erreur lors de l’affichage. En effet, lors de l’affichage de la page, les données « bindées » dans le template HTML seront traitées avant que le provider ait récupéré les données. Si elles ne sont pas initialisées auparavant, elles seront déclarées comme « undefined » et nous récolterons une erreur.

Nous aborderons dans le prochain article le component qui permettra d’afficher la liste des Post.