Я создал свое приложение 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