制作个人资料页面答案

【问题标题】：Make a profile page制作个人资料页面
【发布时间】：2021-06-04 17:13:39
【问题描述】：

我想创建一个个人资料页面，其中包含一个带有用于切换图像的按钮的图像。该按钮进入“定义页面”，并且有一组用于用户选择的化身，选择化身时，它将显示在“配置文件”页面中。

我已经有了定义页面，但我不知道所选图像的信息如何进入个人资料页面。我正在尝试使用 NavigationExtras，但它似乎不起作用。

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { Router, NavigationExtras } from '@angular/router';

@Component({
  selector: 'app-defini',
  templateUrl: './defini.page.html',
  styleUrls: ['./defini.page.scss'],
})
export class DefiniPage{
 
selectArray = [
 {
   "image":"assets/imgs/avatar/badass.jpg",
   "isSelected": false
 },
 {
  "image":"assets/imgs/avatar/chld.jpg",
   "isSelected": false
 },
 {
  "image":'assets/imgs/avatar/man.jpg',
   "isSelected": false
 },
 {
  "image":'assets/imgs/avatar/panda.jpg',
   "isSelected": false
 },
 {
  "image":"assets/imgs/avatar/pguim.jpg",
   "isSelected": false
 },
 {
  "image":"assets/imgs/avatar/woman.jpg",
   "isSelected": false
 },
 {
  "image":"assets/imgs/avatar/pinguim.jpg",
   "isSelected": false
 }
];
  constructor(public navCtrl: NavController, private router: Router) { 
  }
  btnActivate(ind) {
    for(let i=0;i<this.selectArray.length;i++){
      this.selectArray[i].isSelected = false;
    }
    this.selectArray[ind].isSelected = true;
 }
 
 public verAvatar(image) {
  let navigationExtras: NavigationExtras;

  navigationExtras = {
    state: {
      avatar: this.selectArray[image]
    }
  };
  this.router.navigate(['selectArray'], navigationExtras);

  }

ion-button{
    border-radius: 0%;
    height:80px;
    width: 80px;
    padding: 0%;
    
    

}

h5{
    margin-left: 12px;
}

.selected{
   background-color:#fe00334f;
   
  }

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tab3" text="Alterar Avatar"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-text>
    <h5>Selecione o seu Avatar</h5>
  </ion-text>
 <ion-grid >
   <ion-row>
     <ion-col >
      <ion-button fill="clear" [ngClass]="{'selected':avatar.isSelected}" *ngFor="let avatar of selectArray;let i = index" (click)="btnActivate(i)" >
       <img src="{{avatar.image}}"> 
      </ion-button>
    </ion-col>
  </ion-row>
 </ion-grid>

</ion-content>

【问题讨论】：

您应该使用Observables 进行实时更新。检查这个：stackoverflow.com/a/62275436/5909026
如果选择页面头像是一个模型，你可以在它退出时将数据传递到它打开的页面，如果它是一个页面，则在头像页面中创建一个新的服务和apon选择，设置您在服务中选择的值以及导航回页面时，在每次在视口上预览页面时触发的 ionViewWillEnter() 中。因此，在此函数中，将在该服务上设置的值设置为您的需要，因为 ionViewWillEnter 将采取行动作为可观察的......

标签： ionic-framework

【解决方案1】：

请记住，您使用的是 Ionic 框架。不要使用角度路由器。使用离子控制器。

注意：没有看到您的路由模块定义，我只是假设“selectArray”是正确的路径。这也可能是您的应用无法运行的原因。在浏览器中运行您的应用并从 console.log 中查找错误。

this.navController.navigateForward('selectArray', navigationExtras);

【讨论】：

【解决方案2】：

也许您可以尝试使用模式传递数据来选择头像。或者您可以使用您的所有个人资料数据（包括头像）创建一个服务并在那里进行修改。如果您需要在应用中的多个位置（而不仅仅是您的个人资料页面）中需要这些数据，则服务非常好。

有很多关于离子服务或在页面或模式之间传递数据的教程。

【讨论】：