如何將社交共享添加到發布Ionic Wordpress應用程序

Question

我一直在嘗試在我的應用程序中插入帖子的共享按鈕，該按鈕能夠使用android手機中安裝的默認應用程序，並且似乎找不到解決方法。

這就是我的post.ts文件的樣子

import { Component } from '@angular/core';
import { NavParams, NavController, AlertController } from 'ionic-angular';
.
.
import { SocialSharing } from '@ionic-native/social-sharing';


/**
 * Generated class for the PostPage page.
 */


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

  post: any;
  user: string; 
  comments: Array<any> = new Array<any>();
  categories: Array<any> = new Array<any>();
  morePagesAvailable: boolean = true;

  constructor(
    public navParams: NavParams,
    public navCtrl: NavController,
    public alertCtrl: AlertController,
    private socialSharing: SocialSharing
  ) {

  }

  ionViewWillEnter(){
    this.morePagesAvailable = true;

    this.post = this.navParams.get('item');

    Observable.forkJoin(
      this.getAuthorData(),
      this.getCategories(),
      this.getComments())
      .subscribe(data => {
        this.user = data[0].name;
        this.categories = data[1];
        this.comments = data[2];
      });
  }

  getAuthorData(){
    return this.wordpressService.getAuthor(this.post.author);
  }

  getCategories(){
    return this.wordpressService.getPostCategories(this.post);
  }

  getComments(){
    return this.wordpressService.getComments(this.post.id);
  }

  loadMoreComments(infiniteScroll) {
    let page = (this.comments.length/10) + 1;
    this.wordpressService.getComments(this.post.id, page)
    .subscribe(data => {
      for(let item of data){
        this.comments.push(item);
      }
      infiniteScroll.complete();
    }, err => {
      console.log(err);
      this.morePagesAvailable = false;
    })
  }

  goToCategoryPosts(categoryId, categoryTitle){
    this.navCtrl.push(HomePage, {
      id: categoryId,
      title: categoryTitle
    })
  }


// Social sharing function is here

 sharePost() {

    this.socialSharing.share("Post Excerpt", "Post Title", "Post Image URL", "Post URL")
    .then(() => {
      console.log("sharePost: Success");
    }).catch(() => {
      console.error("sharePost: failed");
    });

  }

}

問題如何插入帖子標題，將URL帖子圖像（REST API-JSON）插入this.socialSharing.share("Post Excerpt", "Post Title", "Post Image URL", "Post URL")以便共享按鈕可以看起來像這樣

<button ion-fab class="btn share" mini (click)="sharePost()">&#xF497;</button>

編輯我設法使其使用

sharePost() {

    this.socialSharing.share(this.post.excerpt.rendered, this.post.title.rendered, this.post.images.large, this.post.link)
    .then(() => {
      console.log("sharePost: Success");
    }).catch(() => {
      console.error("sharePost: failed");
    });

  }

但是，當我共享使用gmail之類的內容時，會顯示html特殊字符

e.g title shows: catering & Cleaning Services 
Excerpt shows:   <p>Some text[&hellip;]</p>

我如何擺脫那些html字符，而只顯示一些干凈的文本。

謝謝

Answer 1

我從wordpress帖子中刪除html標簽的一種方法是創建一個管道，然后在將其呈現給視圖之前，將摘錄通過管道

Pipe.ts就像這樣

import { Pipe, PipeTransform } from '@angular/core';

/**
 * Generated class for the RemovehtmltagsPipe pipe.
 *
 * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
 */
@Pipe({
  name: 'RemovehtmltagsPipe',
})
export class RemovehtmltagsPipe implements PipeTransform {
  /**
   * Takes a value and makes it lowercase.
   */
  transform(value: string) {
    if (value) {
      let result = value.replace(/<\/?[^>]+>/gi, "");
      return result;
    }
    else {

    }
  }
}

然后我將管道作為導出添加到組件的module.ts中

details.module.ts就像這樣

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular';
import { DetailsPage } from './details';
import { RemovehtmltagsPipe } from 
'../../pipes/removehtmltags/removehtmltags';

@NgModule({
  declarations: [
    DetailsPage,
  ],
  imports: [
    IonicPageModule.forChild(DetailsPage),
  ],
  exports: [RemovehtmltagsPipe],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class DetailsPageModule {}

終於在我的html代碼中使用了管道

details.html

 <ion-row class="white-bg" padding>
    <ion-col>
        <h1 class="title">{{article.title.rendered | RemovehtmltagsPipe}}</h1>
        <p class="date">Published: {{article.modified.split('T')[0]}}  {{article.modified.split('T')[1]}}</p>
    </ion-col>
</ion-row>

這應該擺脫您帖子中的任何html標簽。希望這會有所幫助