ionic3+ts 基于angular4 下的选项卡实现方法

Question

实现点击商品类 右侧更换视图 我选择的是选项卡 路由不知道怎么写 有会的可以的提供一下思路，或者更好的实现颁发

Answer 1

我觉得这里没必要用router来做。

从你的截图来看，右边是菜单，也就是一个确定的布局

所以你可以专门做一个MenuCard的component，它可以有一个输入参数@Input() options: MenuCardOptions ,
里面的参数就是你需要动态呈现的内容，比如：

interface MenuCardOptions {
   imgSrc: string;
   productName: string;
   price: string;
   amount: number;
   details: string; //查看的具体信息
}

这个时候，右边的结构就是包括一定数量的MenuCard的数组，

menuCardList: Array<MenuCardOptions>;

一旦你拿到这个数组，你就可以loop出来所有的菜单。

<ng-container *ngFor="let opt of menuCardList">
    <menu-card [options]="opt">
</ng-container>

每次切换左侧的商品类时，其实你就是拿到对应的类名，然后调用API，拿到数据并组成你需要的这个menuCardList
在你的infoList这个处理函数中：

infoList(item) {
   //call Api, 比如 
   this.getMenusByType(item.type).map((res: any) => {
      //map数据
   }).subcribe((cardList: Array<MenuCardOptions > => {
       this.menuCardList = cardList;
   })
}

大概的想法就是这样，通过一个菜单数组，来在切换类型时动态展现菜单。

Answer 2

我的思路是将其当成通讯录来做，左边的选项卡类似通讯录的字母导航条，右边的内容类似联系方式列表。打开页面时，一次性获取所有的列表数据并展示，点击左边的选项卡，右边导航至对应的位置。

这样处理有几个好处：
1.某一商品的选中状态不会因为选项卡的切换而清空
2.右边的列表可以展示所有的数据，切换选项卡不会造成数据过滤而导致只展示部分数据。
3.只需要调用一次API

缺点：
1.需要一次性获取所有数据
2.右边数据列表滑动时，左边选项卡选中状态也要变化，这个不好处理