我的思路是將其當(dāng)成通訊錄來做，左邊的選項卡類似通訊錄的字母導(dǎo)航條，右邊的內(nèi)容類似聯(lián)系方式列表。打開頁面時，一次性獲取所有的列表數(shù)據(jù)并展示，點擊左邊的選項卡，右邊導(dǎo)航至對應(yīng)的位置。

這樣處理有幾個好處：
1.某一商品的選中狀態(tài)不會因為選項卡的切換而清空
2.右邊的列表可以展示所有的數(shù)據(jù)，切換選項卡不會造成數(shù)據(jù)過濾而導(dǎo)致只展示部分?jǐn)?shù)據(jù)。
3.只需要調(diào)用一次API

缺點：
1.需要一次性獲取所有數(shù)據(jù)
2.右邊數(shù)據(jù)列表滑動時，左邊選項卡選中狀態(tài)也要變化，這個不好處理

我覺得這里沒必要用router來做。

從你的截圖來看，右邊是菜單，也就是一個確定的布局

所以你可以專門做一個MenuCard的component，它可以有一個輸入?yún)?shù)@Input() options: MenuCardOptions ,
里面的參數(shù)就是你需要動態(tài)呈現(xiàn)的內(nèi)容，比如：

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

這個時候，右邊的結(jié)構(gòu)就是包括一定數(shù)量的MenuCard的數(shù)組，

menuCardList: Array<MenuCardOptions>;

一旦你拿到這個數(shù)組，你就可以loop出來所有的菜單。

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

每次切換左側(cè)的商品類時，其實你就是拿到對應(yīng)的類名，然后調(diào)用API，拿到數(shù)據(jù)并組成你需要的這個menuCardList
在你的infoList這個處理函數(shù)中：

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

大概的想法就是這樣，通過一個菜單數(shù)組，來在切換類型時動態(tài)展現(xiàn)菜單。