Ionic 4 如何将菜单代码放在menu.component.html而非app.component.html

完全可以将菜单代码抽离到独立的menu.component.html中，这是Angular组件化开发的标准实践，还能提升代码的可复用性和可维护性，具体实现步骤如下：

• 第一步：生成独立菜单组件（如果已创建可跳过）
  终端执行Angular CLI命令生成组件：
  ng generate component components/menu
  执行后会自动生成menu组件对应的html、ts、css/scss文件，同时自动声明到对应模块的declarations数组中。
• 第二步：迁移菜单代码
  将原本写在app.component.html中的全部<ion-menu>相关代码剪切粘贴到menu.component.html中，原有菜单的配置（比如side属性、menuId、菜单列表跳转逻辑等）不需要做任何修改。
• 第三步：在根组件中引入菜单组件
  打开app.component.html，在原本放置菜单代码的位置，插入菜单组件的选择器即可，默认生成的选择器为app-menu，代码如下：

  <app-menu></app-menu>
  <!-- 原有路由出口等其他代码保持不变 -->
  <ion-router-outlet id="main-content"></ion-router-outlet>
  

• 第四步：功能校验
  启动项目测试菜单呼出、页面跳转逻辑是否正常，如果出现菜单无法显示的问题，优先排查两个配置：
  1. 菜单组件是否已正确导入到AppModule（或对应功能模块）的declarations配置项中
  2. ion-menu的contentId属性是否和路由出口的id完全匹配

如果后续需要多模块复用该菜单，还可以将MenuComponent单独封装为公共模块，需要使用的模块直接导入公共模块即可，无需重复编写菜单代码

内容的提问来源于stack exchange，提问作者gaurav tyagi