Создайте боковое меню как компонент в ionic 4 - PullRequest
0 голосов
/ 05 марта 2019

Я создал свое приложение ionic 4, используя ionic start myApp sidemenu.

Теперь я просто хочу, чтобы боковое меню было компонентом.

Итак, я создал:

  • /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

1 Ответ

0 голосов
/ 06 марта 2019

Насколько я могу судить, в вашем коде нет ничего плохого, но у меня есть предложение, объявите MenuComponent непосредственно в app.module.ts . возможно это поможет

...