为菜单选项创建组件的建议

Question

我正在使用Angular 4和Angular Material 2.我想要一些建议来创建每个菜单选项的组件。我的菜单有4个类别，每个类别有5个子类别。内容是应用程序。我必须根据类别和子类别显示应用程序。 类别的内容应该看起来像这个模型。它有部分（新软件，最后添加，子类别1，子类别2等等）

类别内容

子类别的内容类似于以下模型。只是一个应用列表

子类别内容

Answer 1

我也在创建购物车应用程序。以下是我的电子产品类别的快照。我不知道这是否是您正在寻找的方法，但这就是我设计电子类别的方式。当然，我的应用程序有很多类别，电子产品 - 子（电脑，手机，智能手表），玩具（娃娃，公主）等。在顶部，我有旋转木马，显示所有类别，接下来显示你所有的类别，接下来是电子产品和电子产品。当我搜索电子产品时，我得到它的参数[id]并将其作为输入传递，

"carousel - shows different categories"
<category [input]="search"></category>,
<brands [input]="search"></brands> ,and 
<products [input]="search></products>.  

类别和品牌有自己的类，所以我知道如何搜索或显示它们。

export class Category {
  constructor(
    public name: string, 
    public imageUrl: string,
    public title?: string,
    public isFeatured?: boolean,
    public categoryId?: string) {}
}   

供您参考，是的。我在我的应用程序中使用了可重用的组件。

Answer 2

我仍然在学习角度，但为了让我的应用程序变得逼真，我的应用程序有一个树形结构。每个品牌和类别都有自己的路由，这意味着他们有自己的标题，家庭，家庭细节。对于我的苹果网站，下面是路由模块：

// Define the routes
const routes: Routes = [
  { path: 'apple', component: AppleComponent,
    children: [
      { path: 'h/apple', component: AppleAccessoryComponent },
      { path: 'iwatch', component: IwatchComponent },
      { path: 'about iphone', component: IphoneAboutComponent},
      { path: 'iphone', component: IphoneComponent },
      { path: 'apple about', component: AppleAboutComponent },
      { path: ':id', component: AppleDetailComponent },
      { path: '', component: AppleHomeComponent }
    ]
  }
];

下面是我的苹果组件的快照。你不介意投我的答案吗？