如何在ionic-v3中获取Google博客文章

时间:2018-12-20 07:49:48

标签: ionic3 blogger

我找到了获取Google博客文章并打开一条文章的代码。但是我最近收到10篇帖子。因此,我不知道如何获得更多帖子或使用下一页标记在下一页打开它们……请帮助。

我尝试了以下示例:https://softwarb.blog/2017/11/27/how-to-blogger-blog-to-ionic-app/

home.html

<ion-header>
  <ion-navbar>
  <ion-title style="padding: 0;">
    {{ title }}
  </ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item ion-item *ngFor="let post of posts" (click)="openPost(post)">
    <ion-avatar item-left>
      <img src="{{ post.author.image }}">
    </ion-avatar>
    <h2 [innerHTML]="post.title"></h2>
    <p [innerHTML]="post.author.displayName"></p>
</ion-item>
</ion-list>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

//Import the Http library and add it to the constructor.
//Import the Constants provider and add it to the constructor.
import { Http } from '@angular/http';
import { ConstantsProvider } from '../../providers/constants/constants';

//Import the post page
import { PostPage } from '../post/post';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    //Create a property for the title of the blog.
    //Create a property for the list of blog posts.
    title: string;
    posts: any[];

  constructor(public navCtrl: NavController, public constants: ConstantsProvider, public http: Http) {
        http.get('https://www.googleapis.com/blogger/v3/blogs/byurl?key=' + constants.getApiKey() + '&url=' + constants.getUrl())
      .subscribe(response => {
        let data = response.json();
        this.title = data.name;
        this.getPosts(data.posts.selfLink);
      });
  }

  //Create a getPosts() function
  getPosts(url:string) {
  this.http.get(url+'?key='+this.constants.getApiKey())
    .subscribe(response => {
      let data = response.json();
      console.log(data);
      this.posts = data.items;
    });
 }

  //Create and openPost(post) function to open the post page and pass the selected post as a parameter.
  openPost(post) {
    this.navCtrl.push(PostPage, {post:post})
  }

}

0 个答案:

没有答案