Question

我是离子/角接触的新手。在我的编辑个人资料页面（不同页面）中，我可以更改个人资料图片，它应该在主要个人资料页面（另一页面）中反映相同，这两个页面是不同的。

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
     });
      }
       }

Answer 1

您需要一些全局状态，该状态将存储化身图像的路径/ base64。

通常，每次启动组件（页面）时都会得到图像，并将path / base64分配给某个变量。

我将使用全局服务或头像服务，该服务将通过Subject / BehaviourSubject存储头像数据。您可以找到关于它们的更多信息here

只要页面被初始化（ngOnInit），您就可以订阅更改或从组件中的服务获取新图像。

Answer 2

通过使用“构造函数注入”导入，可以在两个模块中获得相同的服务

constructor(private myProfileService: ProfileService) {  }

然后仅绑定到从服务获取其值的属性。

Answer 3

创建一个SharedService。公开公开的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：在示例中我没有使用Camera API或任何东西。但是，即使您使用它来更新图像，也要这样做。使用SharedService。

这是您推荐的Working Sample StackBlitz。

Answer 4

我只是使用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}}">

我想从另一个页面成像

4 个答案: