ionic 入门 (七) modal 转跳 ,传参, 单选

ionic 入门 (七) model转跳, 传参

我们做到商品详情的时候需要选择商品的sku , 我们后台会返回关于sku 的数组 , 本章主要给大家介绍 关于商品详情sku 选择 数组如何传递 和 单选

商品详情界面帮点击事件

• html 介绍

<!--  detail 会生成一个向右的箭头, lines="none" 去掉底部下划线,  绑定点击事件 -->
<ion-item detail lines="none" (click)="showSelectedSku()">
          <ion-col size="3">请选择</ion-col>
          <!-- 这里还需要做处理 接受返回的 选中信息 -->
          <ion-col size="6" style="color:#cccccc; text-align: left;">选择sku</ion-col>
</ion-item>    

• ts 界面的介绍

// 引入 modal
import { ModalController, PopoverController } from '@ionic/angular';

constructor(
    private activeRoute: ActivatedRoute,
    /* 绑定 弹出窗口 modal*/
    public modalController: ModalController,
    ) {
    this.activeRoute.queryParams.subscribe((params: Params) => {
      this.product_id = params['product_id'];
      console.log(this.product_id);
});

async presentModal() {
    const modal = await this.modalController.create({
      component: SkuPageComponent,
      // 传参 this.data 你需要传入的数据 
      componentProps: { productDict: this.data },
    });
    return await modal.present();
  }

• skupage ts 介绍

import { Component, OnInit, Input } from '@angular/core';
import { ProductItem } from '../home/home/home.page';

// 用来介绍 传入进来的数据
@Input() productDict: ProductItem;


ngOnInit() {
    // 首先将 每个对象的选中 默认设置为 false 
  this.productDict['sku_list'].forEach(element => {
    element.isSelected = false;
  });
}

selecteItem(item) {
    // 选中唯一的方式
this.productDict['sku_list'].forEach(element => {
    // 判断是否为传入的 item  如果是的 那么这个就是选中的, 其他的全部设置为没有选中
    if (item === element) {
    element.isSelected = true;
    } else {
    element.isSelected = false;
    }
});
}

• html 界面

<ion-list> 
<!-- 设置分类 标题 -->
    <ion-item-divider>
        <ion-label>{{productDict.sku_list[0].sku_title}}</ion-label>
    </ion-item-divider>
    <!-- 循环出来 每个对象 -->
    <ion-item *ngFor="let item of productDict.sku_list">
    <!-- 绑定名称 -->
        <ion-label>{{item.sku_name}}</ion-label>
        <!-- 绑定 是否选中 , 绑定选中的对象属性, 绑定点击事件 -->
        <ion-radio value="family" checked="{{item.isSelected}}" (click)="selecteItem(item)"></ion-radio>
    </ion-item>    
</ion-list>

下一节 介绍, modal 的反向传值, 修改选中的sku标题