feat: new case-pet-detail

src/app/app-routing.module.ts

@@ -41,12 +41,18 @@ const routes: Routes = [
         path: 'case-petmarket',
         loadChildren: () => import('../modules/study/case-js-module/case-parse-petmarket/case-parse-petmarket.module').then( m => m.CaseParsePetmarketPageModule)
       },
+      {
+        path: 'pet/:id',
+        loadChildren: () => import('../modules/study/case-js-module/case-pet-detail/case-pet-detail.module').then( m => m.CasePetDetailPageModule)
+      },
     ]
   },
   {
     path: 'aigc',
     loadChildren: () => import('../modules/aigc/aigc.module').then(m => m.AigcModule)
   },
+
+
  
 
   

src/modules/study/case-js-module/case-parse-petmarket/case-parse-petmarket.page.html

@@ -13,7 +13,7 @@
   </ion-segment>
   <ion-button (click)="toggleSort()">Sort by Price</ion-button>
   <ion-list>
-    <ion-card *ngFor="let pet of pets">
+    <ion-card *ngFor="let pet of pets" routerLink="/study/pet/{{pet.id}}">
       <ion-card-header>
         <ion-card-title>{{ pet.get('name') }}</ion-card-title>
       </ion-card-header>

src/modules/study/case-js-module/case-parse/case-parse.page.html

@@ -11,7 +11,7 @@
     </ion-toolbar>
   </ion-header>
 
-  <ion-card *ngFor="let pet of petList">
+  <ion-card *ngFor="let pet of petList" routerLink="/study/pet/{{pet.id}}">
     {{pet.get("name")}}
   </ion-card>
 </ion-content>

src/modules/study/case-js-module/case-pet-detail/README.md

@@ -0,0 +1,71 @@
+
+# 详情页制作 + 路由跳转 + 路由传参 + 根据ID加载
+
+# 页面创建和路由配置
+
+``` bash
+ionic g page case-pet-detail
+```
+
+- 修改app-routing.module.ts
+``` ts
+  {
+        path: 'pet/:id',
+        loadChildren: () => import('../modules/study/case-js-module/case-pet-detail/case-pet-detail.module').then( m => m.CasePetDetailPageModule)
+      },
+```
+
+# 路由参数id的获取
+
+- case-pet-detail.page.ts
+``` ts
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import Parse from "parse";
+
+@Component({
+  selector: 'app-case-pet-detail',
+  templateUrl: './case-pet-detail.page.html',
+  styleUrls: ['./case-pet-detail.page.scss'],
+})
+export class CasePetDetailPage implements OnInit {
+
+  constructor(private route:ActivatedRoute) { }
+
+  ngOnInit() {
+    this.loadPetById()
+  }
+
+  pet:Parse.Object|undefined
+  async loadPetById(){
+    // let id = location.pathname.split("/").pop();
+    let id = this.route.snapshot.params["id"]
+
+    if(id){
+      let query = new Parse.Query("Pet");
+      this.pet = await query.get(id);
+    }
+  }
+
+}
+```
+
+# 根据ID获取数据的渲染
+> 注意：Parse.Object类型的数据，需要用.get获取内部属性，?.get避免空对象的情况
+- case-pet-detail.page.html
+``` html
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>{{pet?.get("name")}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+  <ion-card>
+    {{pet?.get("type")}}
+    {{pet?.get("price")}}
+  </ion-card>
+</ion-content>
+
+```

src/modules/study/case-js-module/case-pet-detail/case-pet-detail-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CasePetDetailPage } from './case-pet-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CasePetDetailPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CasePetDetailPageRoutingModule {}

src/modules/study/case-js-module/case-pet-detail/case-pet-detail.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { CasePetDetailPageRoutingModule } from './case-pet-detail-routing.module';
+
+import { CasePetDetailPage } from './case-pet-detail.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    CasePetDetailPageRoutingModule
+  ],
+  declarations: [CasePetDetailPage]
+})
+export class CasePetDetailPageModule {}

src/modules/study/case-js-module/case-pet-detail/case-pet-detail.page.html

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>{{pet?.get("name")}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+  <ion-card>
+    {{pet?.get("type")}}
+    {{pet?.get("price")}}
+  </ion-card>
+</ion-content>

src/modules/study/case-js-module/case-pet-detail/case-pet-detail.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CasePetDetailPage } from './case-pet-detail.page';
+
+describe('CasePetDetailPage', () => {
+  let component: CasePetDetailPage;
+  let fixture: ComponentFixture<CasePetDetailPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CasePetDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/modules/study/case-js-module/case-pet-detail/case-pet-detail.page.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import Parse from "parse";
+
+@Component({
+  selector: 'app-case-pet-detail',
+  templateUrl: './case-pet-detail.page.html',
+  styleUrls: ['./case-pet-detail.page.scss'],
+})
+export class CasePetDetailPage implements OnInit {
+
+  constructor(private route:ActivatedRoute) { }
+
+  ngOnInit() {
+    this.loadPetById()
+  }
+
+  pet:Parse.Object|undefined
+  async loadPetById(){
+    // let id = location.pathname.split("/").pop();
+    let id = this.route.snapshot.params["id"]
+
+    if(id){
+      let query = new Parse.Query("Pet");
+      this.pet = await query.get(id);
+    }
+  }
+
+}