Le component Post est le composant de base de notre d\u00e9veloppement puisque c’est l’unit\u00e9 d’information qui sera demand\u00e9e au serveur. Partons du code g\u00e9n\u00e9r\u00e9 par Ionic : <\/p>\n
nous allons d\u00e9j\u00e0 ajouter \u00e0 notre class une interface \u00e0 laquelle elle doit r\u00e9pondre puisque nous allons utiliser une fonction du cycle de vie du component. Cette fonction sera appel\u00e9e \u00e0 l’initialisation du component et s’appelle donc ngOnInit<\/em>. Modifions notre code d’import en cons\u00e9quence : Puis impl\u00e9mentons l’interface : <\/p>\n L’ajout de implements<\/em> \u00e0 notre class indique quelle se conformera bien \u00e0 la d\u00e9finition de l’interface. Pour que cela soit bien le cas, il nous faut ajouter la m\u00e9thode ad\u00e9quate dans le corps de la class.<\/p>\n Nous appellerons donc la m\u00e9thode getSinglePost<\/em> \u00e0 chaque initialisation du component. Voyons donc cette m\u00e9thode qui r\u00e9cup\u00e9rera le contenu du post.<\/p>\n Cette m\u00e9thode utilise le service que nous avons d\u00e9finit pr\u00e9c\u00e9demment et souscrit donc \u00e0 l’observable getPost<\/em> afin de r\u00e9cup\u00e9rer le flux de donn\u00e9es qui constitue notre Post. Ce service a \u00e9t\u00e9 bien s\u00fbr pass\u00e9 au constructeur de la class afin d’\u00eatre disponible pour la m\u00e9thode. Vous remarquez aussi que getPost<\/em> re\u00e7oit comme argument une variable SinglePostId<\/em>. Cette variable est transmise gr\u00e2ce \u00e0 un @Input que nous allons d\u00e9finir en t\u00eate de notre class. Cette variable permettra de pouvoir charger n’importe quel Post directement afin de l’afficher seul et surtout d’y acc\u00e9der par une URL directe sur le site.<\/p>\n Ajoutons aussi les autres propri\u00e9t\u00e9s de notre class : <\/p>\n Ainsi nous initialisons la variable post<\/em> qui reprend la structure d\u00e9finie dans le provider afin d’\u00e9viter le renvoie d’une erreur lors de l’affichage. En effet, lors de l’affichage de la page, les donn\u00e9es \u00ab\u00a0bind\u00e9es\u00a0\u00bb dans le template HTML seront trait\u00e9es avant que le provider ait r\u00e9cup\u00e9r\u00e9 les donn\u00e9es. Si elles ne sont pas initialis\u00e9es auparavant, elles seront d\u00e9clar\u00e9es comme \u00ab\u00a0undefined\u00a0\u00bb et nous r\u00e9colterons une erreur.<\/p>\n Nous aborderons dans le prochain article le component qui permettra d’afficher la liste des Post.<\/p>\n","protected":false},"excerpt":{"rendered":" Le component Post est le composant de base de notre d\u00e9veloppement puisque c’est l’unit\u00e9 d’information qui sera demand\u00e9e au serveur. Nous allons voir dans cet article la mise en \u0153uvre de ce component.<\/p>\n","protected":false},"author":3,"featured_media":587,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-700","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"yoast_head":"\nimport { Component } from '@angular\/core';
\n\/**
\n * Generated class for the PostComponent component.
\n *
\n * See https:\/\/angular.io\/api\/core\/Component for more info on Angular
\n * Components.
\n *\/
\n@Component({
\n selector: 'post',
\n templateUrl: 'post.html'
\n})
\nexport class PostComponent {
\n text: string;
\n constructor() {
\n console.log('Hello PostComponent Component');
\n this.text = 'Hello World';
\n }
\n}
\n<\/code><\/p>\n
\nimport { Component, OnInit, Input } from '@angular\/core';<\/code><\/p>\nexport class Post implements OnInit {<\/code><\/p>\nngOnInit() {
\n this.getSinglePost();
\n}<\/code><\/p>\nR\u00e9cup\u00e9rons un Post<\/h3>\n
getSinglePost() {
\n this.postService
\n .getPost( this.SinglePostId, 'posts' )
\n .subscribe(
\n res => {
\n this.post = res;
\n },
\n error => {
\n this.error = error;
\n }
\n );
\n }<\/code><\/p>\n@Input() SinglePostId: number;<\/code><\/p>\nerror: any;
\npost = {
\n title: {
\n rendered: ""
\n },
\n excerpt: {
\n rendered: ""
\n },
\n content: {
\n rendered: ""
\n },
\n categories: {
\n 0: 0
\n },
\n date: "",
\n data: {
\n status: 0
\n }
\n}
\n<\/code><\/p>\n