我使用ionic start myApp sidemenu
创建了我的离子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
据我所知,您的代码没有任何问题,但我有一个建议,直接在app.module.ts中声明Menu Component。也许有帮助