Ионовый главный вид детализации

Вчера мы добавили API приводит к нашему ионному приложению , давайте посмотрим, как мы можем представить для этого подробный вид.

Это означает, что кто -то должен иметь возможность нажать на конкретную карту, которая должна открыть экран с подробной информацией.

Конечный результат будет выглядеть так:

Добавление страницы с подробностями

Давайте начнем с создания этой страницы детализации.

ng g page detail

Теперь давайте убедимся, что он доступен как подметающий маршрут под нашим Tab2. страницей. Давайте откроем tab2-routing.module.ts и добавить недавно созданный маршрут под : id параметр.

const routes: Routes = [
  {
    path: '',
    component: Tab2Page,
  },
  {
    path: ':id',
    loadChildren: () => import('../detail/detail.module').then(m => m.DetailPageModule)
  }
];

Это убедится, что мы сможем получить доступ к маршруту под следующим URL: Вкладки/Tab2/: id Анкет

Пока мы находимся на TAB2, давайте также добавим ссылку на маршрут. Откройте tab2.page.html и добавьте маршрутизацию в изображение.

Теперь это перейдет на страницу с подробностями, но еще нечего увидеть.

Получение данных на странице подробностей

Можно отправить данные, но представьте себе, что кто -то закрывает приложение на странице подробностей, кэш в магазине может потеряться, и теперь у нас есть идентификатор знания, на какую карту они смотрят.

Из -за этого мы будем выполнять запрос API на основе идентификатора, однако, это хорошая практика, чтобы кэшировать это локально с помощью LocalStorage, например.

Откройте detail.page.ts файл.

export class DetailPage {
  card: Card;
  constructor(private cardService: CardService, private route: ActivatedRoute) { }

  ionViewWillEnter() {
    let id:string = this.route.snapshot.paramMap.get('id');
    this.cardService.get(id).then((card: Card) => this.card = card);
  }
}

Мы добавляем локальную ссылку на карту, которая будет доступна для HTML, затем мы внедряем наш сервис и маршрутизатор.

Мы используем представление, введясь для загрузки данных в нужное время. Затем мы сначала извлекаем идентификатор карты из URL -адреса и передаем его функции Cardervice. Это вернет карту, с которой мы обновляем нашу локальную ссылку.

Вы можете думать, но у нас еще нет этого метода, и вы правы! Итак, давайте откроем card.service.ts и добавьте этот метод:

get(id: string): Promise {
    return PokemonTCG.Card.find(id);
}

Хорошо Теперь все, что нам нужно сделать, это отобрать HTML для детализации.

  
    {{card?.name}}
    
      
    
  



  
    
      {{ card?.supertype }} - {{ card?.subtype }}
      {{ card?.name }}
    

    
      
{{ card?.ability?.name }}
      
{{ card?.ability?.text }}
    
  

Как видите, мы используем такие элементы, как Карта? .Property Вопрос о том, чтобы элемент был доступен. Иначе мы могли бы получить ошибки, говорящие что -то вроде: пытаться получить собственность неопределенного.

С этим на месте у вас есть настройка страницы с подробной информацией.

Вы можете найти сегодняшний код на следующем GitHub Repo .

Спасибо за чтение, и давайте подключимся!

Спасибо за чтение моего блога. Не стесняйтесь подписаться на мою рассылку электронной почты и подключиться на Facebook или Твиттер

Оригинал: “https://dev.to/dailydevtips1/ionic-master-detail-view-452o”