问题实现社交共享离子 ==> 错误 NullInjectorError: R3InjectorError(e)[[object Object]
Posted
技术标签:
【中文标题】问题实现社交共享离子 ==> 错误 NullInjectorError: R3InjectorError(e)[[object Object]【英文标题】：problem implement Social Sharing ionic ==> ERROR NullInjectorError: R3InjectorError(e)[[object Object] 【发布时间】：2020-07-31 11:14:37 【问题描述】：在 ionic 上实现社交分享时出错 https://ionicframework.com/docs/native/social-sharing
我安装好了 离子cordova插件添加cordova-plugin-x-socialsharing npm install @ionic-native/social-sharing
page.ts
import Component, OnInit from '@angular/core';
import WordpressService from '../services/wordpress.service';
import ActivatedRoute from '@angular/router';
import HelperService from "../services/helper.service";
import SocialSharing from '@ionic-native/social-sharing/ngx';
@Component(
selector: 'app-tab5',
templateUrl: 'tab5.page.html',
styleUrls: ['tab5.page.scss'],
providers:[WordpressService]
)
export class Tab5Page implements OnInit
items: any[];
recipeId;
type: String;
content;
title;
post: any;
public favoris: any = [];
posts: any = [];
constructor(
public helperService: HelperService,
public wordpressService: WordpressService,
private route: ActivatedRoute,
private socialSharing: SocialSharing
)
loadPosts()
this.recipeId = this.route.snapshot.paramMap.get('id');
let favored;
let index = 0;
this.wordpressService.getPostContent(this.recipeId,'posts').subscribe(res =>
favored = this.helperService.inArray(res['id'],this.favoris.favorites);
console.log(res);
res['favorisButtonText']= (favored ? "retirer" : "ajouter");
res['favorisButton']= (favored ? false: true);
this.post = res;
,
(err) =>
console.log("Catch error "+JSON.stringify(err));
this.helperService.error("Erreur de chargement article");
);
ngOnInit()
if(this.helperService.is_loged())
this.wordpressService.getFavorites(this.helperService.getUser().user_id).subscribe(res =>
this.favoris = res;
this.loadPosts();
,
(err) =>
console.log("Catch error "+JSON.stringify(err));
this.helperService.error("Erreur de chargement favoris");
);
else
this.loadPosts();
shareViaWhatsApp(text,image,url)
this.socialSharing.shareViaWhatsApp(text, image, url).then((res) =>
// Success
this.helperService.share("WhatsApp","partage sur WhatsApp avec succès","logo-whatsApp");
).catch((e) =>
// Error!
this.helperService.share("WhatsApp","Erreur partage sur WhatsApp","logo-whatsApp");
);
shareViaFacebook(text,image,url)
this.socialSharing.shareViaFacebook(text, image, url).then((res) =>
// Success
this.helperService.share("Facebook","partage sur Facebook avec succès","logo-facebook");
).catch((e) =>
// Error!
this.helperService.share("Facebook","Erreur partage sur Facebook","logo-facebook");
);
shareViaInstagram(text,image)
this.socialSharing.shareViaInstagram(text, image).then((res) =>
// Success
this.helperService.share("Instagram","partage sur Instagram avec succès","logo-instagram");
).catch((e) =>
// Error!
this.helperService.share("Instagram","Erreur partage sur Instagram","logo-instagram");
);
shareViaTwitter(text,image,url)
this.socialSharing.shareViaTwitter(text, image, url).then((res) =>
// Success
this.helperService.share("Twitter","partage sur Twitter avec succès","logo-twitter");
).catch((e) =>
// Error!
this.helperService.share("Twitter","Erreur partage sur Twitter","logo-twitter");
);
page.html
<ion-header>
<ion-toolbar color="light">
<ion-row>
<ion-col width-10 style="text-align: left">
<img src="./assets/logo.png" >
</ion-col>
<ion-col width-90 style="text-align: left">
Articles
</ion-col>
<ion-col width-10 style="text-align: left">
<ion-button expand="full" size="small" fill="clear" (click)="helperService.goToCompte()">
<ion-icon slot="start" name="person"></ion-icon>
<ion-label>Compte</ion-label>
</ion-button>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-header>
<ion-content padding >
<ion-grid>
<h1 class="title-post" [innerHTML]="post?.title.rendered" padding></h1>
<ion-card-subtitle><ion-icon name="calendar"></ion-icon> post?.date_gmt | date <ion-icon name="podium"></ion-icon> Vue : post?.nb_vu.affiche_cape</ion-card-subtitle>
<ion-row>
<ion-col>
<ion-img size="10" class="center" [src]="post?.featured_image_url"></ion-img>
</ion-col>
</ion-row>
<ion-row>
<div [innerHTML]="post?.content.rendered"></div>
</ion-row>
<ion-row>
<ion-col size="6"><ion-button (click)="helperService.openWebpage(post?.source)"><ion-icon name="document"></ion-icon>source</ion-button></ion-col>
<ion-col size="6"><ion-button [rel]="post?.favorisButton" (click)="helperService.setFavoris($event,post?.id)"><ion-icon name="star"></ion-icon>post?.favorisButtonText</ion-button></ion-col>
</ion-row>
</ion-grid>
<ion-row>
<ion-row>
Partage :
</ion-row>
<ion-row>
<ion-col size="3"><ion-button (click)="shareViaWhatsApp(post?.title.rendered,post?.featured_image_url,post?.link)"><ion-icon name="logo-whatsapp"></ion-icon></ion-button></ion-col>
<ion-col size="3"><ion-button (click)="shareViaFacebook(post?.title.rendered,post?.featured_image_url,post?.link)"><ion-icon name="logo-facebook"></ion-icon></ion-button></ion-col>
<ion-col size="3"><ion-button (click)="shareViaInstagram(post?.title.rendered,post?.featured_image_url)"><ion-icon name="logo-instagram"></ion-icon></ion-button></ion-col>
<ion-col size="3"><ion-button (click)="shareViaTwitter(post?.title.rendered,post?.featured_image_url,post?.link)"><ion-icon name="logo-twitter"></ion-icon></ion-button></ion-col>
</ion-row>
</ion-row>
</ion-content>
我有这个错误
main.b73fc2529b5100057963.js:1 ERROR NullInjectorError: R3InjectorError(e)[[object Object] -> [object Object] -> [object Object] -> [object Object] -> [object Object]]:
NullInjectorError: No provider for [object Object]!
我尝试在 app.module.ts 中添加社交分享作为提供者
import NgModule, OnInit from '@angular/core';
import BrowserModule from '@angular/platform-browser';
import RouteReuseStrategy from '@angular/router';
import IonicModule, IonicRouteStrategy from '@ionic/angular';
import SplashScreen from '@ionic-native/splash-screen/ngx';
import StatusBar from '@ionic-native/status-bar/ngx';
import HttpClientModule, HTTP_INTERCEPTORS from '@angular/common/http';
import AppRoutingModule from './app-routing.module';
import AppComponent from './app.component';
import IonicStorageModule from '@ionic/storage';
import JwtInterceptor from './interceptors/jwt.interceptor';
import InAppBrowser from '@ionic-native/in-app-browser/ngx';
import HelperService from "./services/helper.service";
import WordpressService from './services/wordpress.service';
import AppVersion from '@ionic-native/app-version/ngx';
import SocialSharing from '@ionic-native/social-sharing/ngx';
@NgModule(
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, HttpClientModule,
IonicModule.forRoot(), AppRoutingModule,
IonicStorageModule.forRoot()],
providers: [
StatusBar,
SplashScreen,
InAppBrowser,
AppVersion,
HttpClientModule,
SocialSharing,
provide: RouteReuseStrategy, useClass: IonicRouteStrategy ,
provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true
],
bootstrap: [AppComponent]
)
export class AppModule implements OnInit
constructor(public helperService: HelperService,
public wordpressService: WordpressService,
)
public favoris: any = [];
ngOnInit()
但我还有一个错误
Error: Invalid provider for the NgModule 'e' - only instances of Provider and Type are allowed, got: [..., ..., ..., ..., ..., ?[object Object]?, ..., ...]
如果有人有任何想法？感谢您的帮助
【问题讨论】：
【参考方案1】：我像这样解决了 app.module.ts
import NgModule, OnInit from '@angular/core';
import BrowserModule from '@angular/platform-browser';
import RouteReuseStrategy from '@angular/router';
import IonicModule, IonicRouteStrategy from '@ionic/angular';
import SplashScreen from '@ionic-native/splash-screen/ngx';
import StatusBar from '@ionic-native/status-bar/ngx';
import HttpClientModule, HTTP_INTERCEPTORS from '@angular/common/http';
import AppRoutingModule from './app-routing.module';
import AppComponent from './app.component';
import IonicStorageModule from '@ionic/storage';
import JwtInterceptor from './interceptors/jwt.interceptor';
import InAppBrowser from '@ionic-native/in-app-browser/ngx';
import HelperService from "./services/helper.service";
import WordpressService from './services/wordpress.service';
import AppVersion from '@ionic-native/app-version/ngx';
import SocialSharing from '@ionic-native/social-sharing/ngx';
@NgModule(
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, HttpClientModule,
IonicModule.forRoot(), AppRoutingModule,
IonicStorageModule.forRoot()],
providers: [
StatusBar,
SplashScreen,
InAppBrowser,
AppVersion,
HttpClientModule,
SocialSharing,
provide: RouteReuseStrategy, useClass: IonicRouteStrategy ,
provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true
],
bootstrap: [AppComponent]
)
export class AppModule implements OnInit
constructor(public helperService: HelperService,
public wordpressService: WordpressService,
)
public favoris: any = [];
ngOnInit()
page.ts
import Component, OnInit from '@angular/core';
import WordpressService from '../services/wordpress.service';
import ActivatedRoute from '@angular/router';
import HelperService from "../services/helper.service";
import SocialSharing from '@ionic-native/social-sharing/ngx';
@Component(
selector: 'app-tab5',
templateUrl: 'tab5.page.html',
styleUrls: ['tab5.page.scss'],
providers:[WordpressService,SocialSharing]
)
不确定这是最好的方法，因为当我分享时，它不起作用
【讨论】：
以上是关于问题实现社交共享离子 ==> 错误 NullInjectorError: R3InjectorError(e)[[object Object]的主要内容，如果未能解决你的问题，请参考以下文章
离子无法在 StackManager.transitionPage 读取 null 的属性（读取“removeChild”）