路由传参

src/app/album/album.page.scss

@@ -1,8 +1,8 @@
 ion-card {
     margin: 5px;
     img {
-      width: 100%;
-      height: 100%;
+      width: 30vw;
+      height: 15vh;
       object-fit: cover;
     }
   }

src/app/album/album.page.ts

@@ -15,11 +15,15 @@ export class AlbumPage implements OnInit {
 
   constructor() {
     this.imageRows = [
-      [{ url: '/assets/img/man.jpg' }, { url: 'image2.jpg' }, { url: 'image3.jpg' }],
-      [{ url: 'image4.jpg' }, { url: 'image5.jpg' }, { url: 'image6.jpg' }],
-      [{ url: 'image7.jpg' }, { url: 'image8.jpg' }, { url: 'image9.jpg' }],
-      [{ url: 'image10.jpg' }, { url: 'image11.jpg' }, { url: 'image12.jpg' }],
-      [{ url: 'image13.jpg' }, { url: 'image14.jpg' }, { url: 'image15.jpg' }]
+      [{ url: '/assets/img/man.jpg' }, { url: '/assets/img/bg.jpg' }, { url: '/assets/img/bg1.jpg' }],
+      [{ url: '/assets/img/bg2.jpg' }, { url: '/assets/img/meishi1.jpg' }, { url: '/assets/img/meishi2.jpg' }],
+      [{ url: '/assets/img/meishi3.jpg' }, { url: '/assets/img/meishi4.jpg' }, { url: '/assets/img/meishi5.jpg' }],
+      [{ url: 'https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/aigc/imagine/WZtW1H4qA8-0.png' }, 
+        { url: 'https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/aigc/imagine/ulvSLmmFcS-0.png' }, 
+        { url: 'https://imgsource.huashi6.com/images/ai/2024/1/7/12_507880.jpg?e=1704601468&token=qFZErZx7WS1v5B4rgQE2KLMHlYHVNaCuXeaA9OLD:fAB98pfcpJWmX_yIN_cih-FM5GE=' }],
+      [{ url: 'https://imgsource.huashi6.com/images/ai/2024/1/7/12_35609.jpg?e=1704601363&token=qFZErZx7WS1v5B4rgQE2KLMHlYHVNaCuXeaA9OLD:m10v6DHossLfoo5PrqO_IrfySk0=' }, 
+        { url: 'https://imgsource.huashi6.com/images/ai/2024/1/7/12_420324.jpg?e=1704600947&token=qFZErZx7WS1v5B4rgQE2KLMHlYHVNaCuXeaA9OLD:9gq5KvhSyefb8hejiQPXxOpy5Hk=' }, 
+        { url: 'https://imgsource.huashi6.com/images/ai/2024/1/7/12_457203.jpg?e=1704601112&token=qFZErZx7WS1v5B4rgQE2KLMHlYHVNaCuXeaA9OLD:3xLep_9xwPTAvTRE7qPxXjQnw6Y=' }],
     ];
   }
 

src/app/app-routing.module.ts

@@ -1,23 +1,24 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [
-  {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
-  },
-  {
-    path: 'new-page',
-    loadChildren: () => import('./new-page/new-page.module').then( m => m.NewPagePageModule)
-  },
-  {
-    path: 'login',
-    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
-  },
-  {
-    path: 'register',
-    loadChildren: () => import('./register/register.module').then( m => m.RegisterPageModule)
-  },
  {
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
+  },
+  {
+    path: 'new-page',
+    loadChildren: () => import('./new-page/new-page.module').then( m => m.NewPagePageModule)
+  },
+  {
+    path: 'login',
+    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
+  },
+  {
+    path: 'register',
+    loadChildren: () => import('./register/register.module').then( m => m.RegisterPageModule)
+  },
+  {
     path: 'album',
     loadChildren: () => import('./album/album.module').then( m => m.AlbumPageModule)
   },
@@ -26,12 +27,12 @@ const routes: Routes = [
     loadChildren: () => import('./contact/contact.module').then( m => m.ContactPageModule)
   }
 
-  
-];
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
+  
+];
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/contact/contact.page.html

@@ -14,7 +14,7 @@
     <ion-card-header>
       <ion-card-title>
         <ion-avatar style="width: 80px; height: 80px; margin-left: 39%;">
-          <img src="/assets/img/man.jpg" alt="头像">
+          <img src="{{ linkman?.get('user')?.get('avatar') }}" alt="头像">
         </ion-avatar>
       </ion-card-title>
     </ion-card-header>
@@ -24,16 +24,16 @@
     <ion-list style="margin: 15px;">
       <ion-item button (click)="editProfile('name')">
         <ion-label>姓名</ion-label>
-        <ion-note slot="end">{{ profile.name }}</ion-note>
+        <ion-note slot="end">{{ linkman?.get('user')?.get('username') }}</ion-note>
       </ion-item>
       <ion-item button (click)="editProfile('birthday')">
         <ion-label>生日</ion-label>
-        <ion-note slot="end">{{ profile.birthday | date }}</ion-note>
+        <ion-note slot="end">{{ linkman?.get('user')?.get('birthday')|date:'yyyy-MM-dd' }}</ion-note>
       </ion-item>
   
       <ion-item button (click)="editProfile('relationship')">
         <ion-label>与TA的关系</ion-label>
-        <ion-note slot="end">{{ profile.relationship }}</ion-note>
+        <ion-note slot="end">{{ profile?.relationship }}</ion-note>
       </ion-item>
       <ion-item>
         <ion-label>性别</ion-label>
@@ -45,7 +45,7 @@
       </ion-item>
       <ion-item button (click)="editProfile('contact')">
         <ion-label>联系方式</ion-label>
-        <ion-note slot="end">{{ profile.contact }}</ion-note>
+        <ion-note slot="end">{{ linkman?.get('user')?.get('mobile') }}</ion-note>
       </ion-item>
     </ion-list>
   </ion-card>
@@ -54,19 +54,19 @@
     <ion-list>
       <ion-item button (click)="editProfile('hobbies')">
         <ion-label>爱好</ion-label>
-        <ion-note slot="end">{{ profile.hobbies }}</ion-note>
+        <ion-note slot="end">{{ linkman?.get('hobby') }}</ion-note>
       </ion-item>
       <ion-item button (click)="editProfile('taste')">
         <ion-label>口味</ion-label>
-        <ion-note slot="end">{{ profile.taste }}</ion-note>
+        <ion-note slot="end">{{ linkman?.get('taste') }}</ion-note>
       </ion-item>
       <ion-item button (click)="editProfile('habits')">
         <ion-label>习惯</ion-label>
-        <ion-note slot="end">{{ profile.habits }}</ion-note>
+        <ion-note slot="end">{{ linkman?.get('habit') }}</ion-note>
       </ion-item>
       <ion-item button (click)="editProfile('dislikes')">
         <ion-label>讨厌</ion-label>
-        <ion-note slot="end">{{ profile.dislikes }}</ion-note>
+        <ion-note slot="end">{{ linkman?.get('disgusting') }}</ion-note>
       </ion-item>
     </ion-list>
   </ion-card>

src/app/contact/contact.page.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import * as Parse from "parse";
+(Parse as any).serverURL = "https://web2023.fmode.cn/parse"
+Parse.initialize("dev")
 
 @Component({
   selector: 'app-contact',
@@ -7,9 +11,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ContactPage implements OnInit {
 
-  constructor() { }
+
+  contactId:any
+  constructor(private route: ActivatedRoute,) { 
+    this.route.queryParamMap.subscribe(params => {
+      this.contactId = params.get('contactId')
+      console.log(this.contactId)
+    })
+   }
 
   ngOnInit() {
+    this.getLinkman()
   }
 
   profile = {
@@ -29,4 +41,13 @@ export class ContactPage implements OnInit {
     // 这里可以添加逻辑来弹出一个模态框或表单来编辑属性
   }
 
+  linkman:any
+  async getLinkman(){
+    let query = new Parse.Query("Linkman");
+    query.equalTo('objectId',this.contactId)
+    query.include("user")
+    this.linkman = await query.first()
+    console.log(this.linkman);
+  }
+
 }

src/app/tab2/tab2.page.html

@@ -16,20 +16,20 @@
   </ion-toolbar>
   </div>
 
-  <ion-card *ngFor="let contact of filterContacts()" class="custom-card">
-    <ion-card-header>
-      <ion-card-subtitle (click)="goContact()">继承人姓名</ion-card-subtitle>
-      <ion-card-title>{{ contact.name }}</ion-card-title>
+  <ion-card *ngFor="let contact of linkman" class="custom-card">
+    <ion-card-header  (click)="goContact(contact.id)">
+      <ion-card-subtitle>继承人姓名</ion-card-subtitle>
+      <ion-card-title>{{ contact?.get('user')?.get('name') }}</ion-card-title>
     </ion-card-header>
     <ion-card-content>
       <ion-list>
         <ion-item  style="background-color: var(--custom-background-color);">
           <ion-label>继承人电话</ion-label>
-          <ion-text color="dark">{{ contact.phone }}</ion-text>
+          <ion-text color="dark">{{ contact?.get('user')?.get('mobile') }}</ion-text>
         </ion-item>
         <ion-item>
-          <ion-label>继承人邮箱</ion-label>
-          <ion-text color="dark">{{ contact.email }}</ion-text>
+          <ion-label>继承人生日</ion-label>
+          <ion-text color="dark">{{ contact?.get('user')?.get('birthday')|date:'yyyy-MM-dd'}}</ion-text>
         </ion-item>
       </ion-list>
     </ion-card-content>

src/app/tab2/tab2.page.ts

@@ -1,77 +1,99 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { AlertController } from '@ionic/angular';
 import { Router } from '@angular/router';
+import * as Parse from "parse";
+(Parse as any).serverURL = "https://web2023.fmode.cn/parse"
+Parse.initialize("dev")
+
+
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss']
 })
-export class Tab2Page {
+export class Tab2Page implements OnInit {
+
+
+  ngOnInit() {
+    this.getLinkman()
+  }
 
   contacts = [
-    { name: '小江', phone: '13767975832', email: '1969965415' },
-    { name: '小明', phone: '123456789', email: 'xiaoming@example.com' },
-    { name: '小红', phone: '987654321', email: 'xiaohong@example.com' }
+    { name: '李华', phone: '13767975832', email: '1969965415' },
+    { name: '李评', phone: '123456789', email: 'xiaoming@example.com' },
+    { name: '王芳', phone: '987654321', email: 'xiaohong@example.com' }
     // 其他联系人数据
   ];
   searchText: string = '';
 
-  constructor(private alertController: AlertController,private router: Router) {}
+  constructor(private alertController: AlertController, private router: Router) { }
 
   filterContacts() {
     return this.contacts.filter(contact => contact.name.toLowerCase().includes(this.searchText.toLowerCase()));
   }
 
-  
+
   openMessages() {
     // 在这里编写打开消息页面的逻辑
     console.log('打开消息页面');
   }
 
   //添加联系人
-  async add(){
-  const alert = await this.alertController.create({
-    header: '添加新继承人',
-    inputs: [
-      {
-        name: 'name',
-        type: 'text',
-        placeholder: '姓名'
-      },
-      {
-        name: 'phone',
-        type: 'tel',
-        placeholder: '电话'
-      },
-      {
-        name: 'email',
-        type: 'email',
-        placeholder: '邮箱'
-      }
-    ],
-    buttons: [
-      {
-        text: '取消',
-        role: 'cancel'
-      },
-      {
-        text: '确定',
-        handler: (data) => {
-          const newContact = {
-            name: data.name,
-            phone: data.phone,
-            email: data.email
-          };
-          this.contacts.push(newContact);
+  async add() {
+    const alert = await this.alertController.create({
+      header: '添加新继承人',
+      inputs: [
+        {
+          name: 'name',
+          type: 'text',
+          placeholder: '姓名'
+        },
+        {
+          name: 'phone',
+          type: 'tel',
+          placeholder: '电话'
+        },
+        {
+          name: 'email',
+          type: 'email',
+          placeholder: '邮箱'
         }
-      }
-    ]
-  });
-  await alert.present();
-}
-//切换界面
-goContact(){
-  console.log(11)
-  this.router.navigate(['/contact']);
-}
+      ],
+      buttons: [
+        {
+          text: '取消',
+          role: 'cancel'
+        },
+        {
+          text: '确定',
+          handler: (data) => {
+            const newContact = {
+              name: data.name,
+              phone: data.phone,
+              email: data.email
+            };
+            this.contacts.push(newContact);
+          }
+        }
+      ]
+    });
+    await alert.present();
+  }
+  //切换界面
+  // goContact() {
+  //   console.log(11)
+  //   this.router.navigate(['/contact']);
+  // }
+  linkman:any[] = []
+  async getLinkman(){
+    let query = new Parse.Query("Linkman");
+    query.include("user")
+    this.linkman = await query.find()
+    console.log(this.linkman);
+  }
+  contactId: string | undefined
+  goContact(contactId: string | undefined) {
+    this.router.navigate(["/contact/"], { queryParams: { contactId: contactId } })
+    console.log(contactId);
+  }
 }