我想从另一页图片
I want to image from another page
我是 ionic/angular 的新手。在我的编辑个人资料页面（不同的页面）中，我可以更改个人资料图片，它应该在主个人资料页面（另一个页面）中反映相同，这两个页面是不同的。
HTML:
<ion-item lines="none">
<ion-avatar class="ion-align-self-left" id="pic" (click)="change()">
<img src="{{myphoto}}">
</ion-avatar>
</ion-item>
TS:
export class ProfilePage implements OnInit {
myphoto:any;
constructor(private camera: Camera) {
this.myphoto = '/assets/img/DP.svg';
this.statusBar.backgroundColorByHexString('#ffffff');
}
ngOnInit() {
}
take(){
this.ishide =true;
this.hide_input =false;
const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
this.myphoto = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
}
get() {
this.ishide =true;
this.hide_input =false;
const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.DATA_URL,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
saveToPhotoAlbum:false
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
this.myphoto = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
}
}
您需要一些全局状态，用于存储头像图像的 path/base64。
通常，您会在每次初始化组件（页面）时获取图像并将 path/base64 分配给某个变量。
我会使用全球服务或头像服务，通过 Subject/BehaviourSubject 存储头像数据。您可以找到更多关于它们的信息 here
每当页面初始化 (ngOnInit) 时，您都可以订阅更改或从组件中的服务获取新图像。
您可以通过使用 "constructor injection"
导入来在两个模块中获得相同的服务
constructor(private myProfileService: ProfileService) { }
然后只需绑定到 属性 从服务中获取其值。
创建 SharedService。公开一个 public Observable 和一个使用私有 BehaviorSubject:
设置其值的方法
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable()
export class SharedService {
private profilePicture: BehaviorSubject<string> = new BehaviorSubject<string>( 'https://firebasestorage.googleapis.com/v0/b/siddajmera-dev.appspot.com/o/Avatar.jpg?alt=media&token=ba992ea4-3198-4971-b4ee-5454ec2b3cbd');
public profilePicture$: Observable<string> = this.profilePicture.asObservable();
setProfilePicture(newProfilePicture: string) {
this.profilePicture.next(newProfilePicture);
}
}
在要更改个人资料图片的页面中注入此服务并进行设置：
您要显示的位置：
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Observable } from 'rxjs';
import { SharedService } from '../../app/shared.service';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
profilePicture$: Observable<string>;
constructor(
public navCtrl: NavController,
private sharedService: SharedService
) {}
ngOnInit() {
this.profilePicture$ = this.sharedService.profilePicture$;
}
}
并在模板中：
<ion-header>
<ion-navbar>
<ion-title>Main Profile Page</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>pages/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>
<ion-item lines="none">
<ion-avatar class="ion-align-self-left" id="pic">
<img [src]="profilePicture$ | async">
</ion-avatar>
</ion-item>
</ion-content>
您要设置的位置：
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Observable } from 'rxjs';
import { SharedService } from '../../app/shared.service';
@Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
profilePicutre$: Observable<string>;
constructor(
public navCtrl: NavController,
private sharedService: SharedService
) { }
ngOnInit() {
this.profilePicutre$ = this.sharedService.profilePicture$;
}
change() {
this.sharedService.setProfilePicture(`https://pbs.twimg.com/profile_images/1116889337075920898/foGk0y53_400x400.jpg`);
}
}
并且在模板中：
<ion-header>
<ion-navbar>
<ion-title>
Edit Profile Page
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item lines="none">
<ion-avatar class="ion-align-self-left" id="pic" (click)="change()">
<img [src]="profilePicutre$ | async">
</ion-avatar>
</ion-item>
</ion-content>
并在 'app.module.ts' 中提供 SharedService
@NgModule({
declarations: [
HomePage,
Aboutpage
],
providers: [ SharedService ]
})
PS: I'm not using the Camera API or anything in the example. But even if you're using that to get the image updated, this is how you'd do it. Using a SharedService.
Here's a Working Sample StackBlitz for your ref.
我通过简单地使用 localstorage 解决了自己的问题，并继续返回当前页面将刷新并且在 edit_profile 页面中所做的更改将在配置文件页面中受到影响。
edit_profile.ts
import { Router } from "@angular/router";
export class ProfilePage implements OnInit {
myphoto: any = "/assets/img/DP.svg";
picture: any;
constructor(
private camera: Camera,
private statusBar: StatusBar,
private router: Router
) {
this.picture = localStorage.getItem("pic");
this.statusBar.backgroundColorByHexString("#ffffff");
}
back() {
this.router.navigateByUrl("/profile");
}
take() {
this.ishide = true;
this.hide_input = false;
const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
};
this.camera.getPicture(options).then(
imageData => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
this.myphoto = "data:image/jpeg;base64," + imageData;
localStorage.setItem("pic", this.myphoto);
this.picture = localStorage.getItem("pic");
},
err => {
// Handle error
}
);
}
get() {
this.ishide = true;
this.hide_input = false;
const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.DATA_URL,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
saveToPhotoAlbum: false
};
edit_profile.html
<img src="{{picture}}">
profile.ts
export class MainProfilePage implements OnInit {
picc: any;
ionViewWillEnter() {
this.picc = localStorage.getItem("pic");
console.log("works");
}
profile.html
<img src="{{picc}}">
我是 ionic/angular 的新手。在我的编辑个人资料页面（不同的页面）中，我可以更改个人资料图片，它应该在主个人资料页面（另一个页面）中反映相同，这两个页面是不同的。
HTML:
<ion-item lines="none">
<ion-avatar class="ion-align-self-left" id="pic" (click)="change()">
<img src="{{myphoto}}">
</ion-avatar>
</ion-item>
TS:
export class ProfilePage implements OnInit {
myphoto:any;
constructor(private camera: Camera) {
this.myphoto = '/assets/img/DP.svg';
this.statusBar.backgroundColorByHexString('#ffffff');
}
ngOnInit() {
}
take(){
this.ishide =true;
this.hide_input =false;
const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
this.myphoto = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
}
get() {
this.ishide =true;
this.hide_input =false;
const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.DATA_URL,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
saveToPhotoAlbum:false
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
this.myphoto = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
}
}
您需要一些全局状态，用于存储头像图像的 path/base64。
通常，您会在每次初始化组件（页面）时获取图像并将 path/base64 分配给某个变量。
我会使用全球服务或头像服务，通过 Subject/BehaviourSubject 存储头像数据。您可以找到更多关于它们的信息 here
每当页面初始化 (ngOnInit) 时，您都可以订阅更改或从组件中的服务获取新图像。
您可以通过使用 "constructor injection"
导入来在两个模块中获得相同的服务constructor(private myProfileService: ProfileService) { }
然后只需绑定到 属性 从服务中获取其值。
创建 SharedService。公开一个 public Observable 和一个使用私有 BehaviorSubject:
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable()
export class SharedService {
private profilePicture: BehaviorSubject<string> = new BehaviorSubject<string>( 'https://firebasestorage.googleapis.com/v0/b/siddajmera-dev.appspot.com/o/Avatar.jpg?alt=media&token=ba992ea4-3198-4971-b4ee-5454ec2b3cbd');
public profilePicture$: Observable<string> = this.profilePicture.asObservable();
setProfilePicture(newProfilePicture: string) {
this.profilePicture.next(newProfilePicture);
}
}
在要更改个人资料图片的页面中注入此服务并进行设置：
您要显示的位置：
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Observable } from 'rxjs';
import { SharedService } from '../../app/shared.service';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
profilePicture$: Observable<string>;
constructor(
public navCtrl: NavController,
private sharedService: SharedService
) {}
ngOnInit() {
this.profilePicture$ = this.sharedService.profilePicture$;
}
}
并在模板中：
<ion-header>
<ion-navbar>
<ion-title>Main Profile Page</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>pages/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>
<ion-item lines="none">
<ion-avatar class="ion-align-self-left" id="pic">
<img [src]="profilePicture$ | async">
</ion-avatar>
</ion-item>
</ion-content>
您要设置的位置：
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Observable } from 'rxjs';
import { SharedService } from '../../app/shared.service';
@Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
profilePicutre$: Observable<string>;
constructor(
public navCtrl: NavController,
private sharedService: SharedService
) { }
ngOnInit() {
this.profilePicutre$ = this.sharedService.profilePicture$;
}
change() {
this.sharedService.setProfilePicture(`https://pbs.twimg.com/profile_images/1116889337075920898/foGk0y53_400x400.jpg`);
}
}
并且在模板中：
<ion-header>
<ion-navbar>
<ion-title>
Edit Profile Page
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item lines="none">
<ion-avatar class="ion-align-self-left" id="pic" (click)="change()">
<img [src]="profilePicutre$ | async">
</ion-avatar>
</ion-item>
</ion-content>
并在 'app.module.ts' 中提供 SharedService
@NgModule({
declarations: [
HomePage,
Aboutpage
],
providers: [ SharedService ]
})
PS: I'm not using the Camera API or anything in the example. But even if you're using that to get the image updated, this is how you'd do it. Using a
SharedService.
Here's a Working Sample StackBlitz for your ref.
我通过简单地使用 localstorage 解决了自己的问题，并继续返回当前页面将刷新并且在 edit_profile 页面中所做的更改将在配置文件页面中受到影响。
edit_profile.ts
import { Router } from "@angular/router";
export class ProfilePage implements OnInit {
myphoto: any = "/assets/img/DP.svg";
picture: any;
constructor(
private camera: Camera,
private statusBar: StatusBar,
private router: Router
) {
this.picture = localStorage.getItem("pic");
this.statusBar.backgroundColorByHexString("#ffffff");
}
back() {
this.router.navigateByUrl("/profile");
}
take() {
this.ishide = true;
this.hide_input = false;
const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
};
this.camera.getPicture(options).then(
imageData => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
this.myphoto = "data:image/jpeg;base64," + imageData;
localStorage.setItem("pic", this.myphoto);
this.picture = localStorage.getItem("pic");
},
err => {
// Handle error
}
);
}
get() {
this.ishide = true;
this.hide_input = false;
const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.DATA_URL,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
saveToPhotoAlbum: false
};
edit_profile.html
<img src="{{picture}}">
profile.ts
export class MainProfilePage implements OnInit {
picc: any;
ionViewWillEnter() {
this.picc = localStorage.getItem("pic");
console.log("works");
}
profile.html
<img src="{{picc}}">