
# 详情页制作 + 路由跳转 + 路由传参 + 根据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>

```