jtpapp/src/modules/study/case-js-module/case-pet-detail

详情页制作 + 路由跳转 + 路由传参 + 根据ID加载

页面创建和路由配置

ionic g page case-pet-detail

• 修改app-routing.module.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

  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

  <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>