在 ionic 4 中创建侧边菜单作为组件答案

【问题标题】：Create the side menu as a component in ionic 4在 ionic 4 中创建侧边菜单作为组件
【发布时间】：2019-07-27 10:01:00
【问题描述】：

我使用 ionic start myApp sidemenu 创建了我的 ionic 4 应用程序。

现在我只想让侧边菜单成为一个组件。

所以我创建了：

/src/app/menu/menu.component.ts:

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
})
export class MenuComponent implements OnInit {

  // [...] code copied from original generated app.component.ts

}

/src/app/menu/menu.component.html 使用原始生成的代码app.component.html，
/src/app/menu/menu.module.ts:

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    RouterModule
  ],
  declarations: [MenuComponent],
  exports: [MenuComponent]
})
export class MenuComponentModule {}

修改/src/app/app.module.ts:

@NgModule({
  declarations: [AppComponent],
  entryComponents: [MenuComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    MenuComponentModule
  ],
  // [...] providers & bootstrap identicall as original
})
export class AppModule {}

将/src/app/app.component.html 修改为简单的这个文件：

<ion-app>
  <ion-split-pane>
    <ion-menu>
      <app-menu></app-menu>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

然后什么都没有显示，我在控制台中有这个错误我不知道为什么：

Error: Template parse errors:
'app-menu' is not a known element:
1. If 'app-menu' is an Angular component, then verify that it is part of this module.
2. If 'app-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <ion-split-pane>
    <ion-menu>
      [ERROR ->]<app-menu></app-menu>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
"): ng:///AppModule/AppComponent.html@3:6

【问题讨论】：

你应该在你的module.ts文件中添加schemas: [ CUSTOM_ELEMENTS_SCHEMA ],，也可以查看这篇文章在ionic 4中创建一个侧边菜单petercoding.com/2019/05/05/side-menu-in-ionic4

标签： angular angular-components ionic4 angular-module

【解决方案1】：

请将 contentId 和 id 添加到您的元素中，如下所示：

<ion-app>
  <ion-split-pane contentId="menu-content">
    <ion-menu contentId="menu-content" side="end">
      <app-menu></app-menu>
    </ion-menu>
    <ion-router-outlet id="menu-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

这里是菜单组件：

<ion-header>
  <ion-toolbar>
    <ion-title>Menu</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-menu-toggle auto-hide="false">
      <ion-item>Menu Item</ion-item>
    </ion-menu-toggle>
  </ion-list>
</ion-content>

并在您需要的页面上添加菜单：

....
<ion-buttons slot="end">
  <ion-menu-button></ion-menu-button>
</ion-buttons>
....

希望对你有帮助

【讨论】：