我试着用ionic Angular做一个侧菜单。我想在更多的页面中使用它。我做了一个名为“menu-for-client”的组件,我把它导入到“Components.module.ts”中,然后我把ComponentsModule导入到我的页面中。菜单没有显示。
这是我的组件.模块.ts:
import { NgModule } from '@angular/core';
import { MenuForClientComponent } from "./menu-for-client/menu-for-client.component";
import {IonicModule} from "@ionic/angular";
import { RouterModule } from "@angular/router";
@NgModule({
declarations: [MenuForClientComponent],
imports: [
IonicModule, RouterModule
],
exports: [MenuForClientComponent]
})
export class ComponentsModule{}
在组件menu-for-client.component.html中,我有以下内容:
<ion-menu side="start" menuId="first" content-id="main" type="overlay">
<ion-header>
<ion-toolbar color="success">
<ion-title color="dark">Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle>
<ion-item routerLink="/browse">
<ion-icon name="search" slot="start"></ion-icon>
<ion-label>Browse</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item routerLink="/orders">
<ion-icon name="list-circle-outline" slot="start"></ion-icon>
<ion-label>Orders</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item routerLink="/discount-codes">
<ion-icon name="barcode" slot="start"></ion-icon>
<ion-label>Discount Codes</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item routerLink="/login">
<ion-icon name="arrow-back-circle-outline" slot="start"></ion-icon>
<ion-label>Sign Out</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main"></ion-router-outlet>
在我的browse.page.html中,我有以下内容:
<ion-content scroll-y="false">
<ion-toolbar>
<app-searchbar></app-searchbar>
<ion-buttons slot="start">
<ion-menu-button color="dark" menu="first"></ion-menu-button>
<ion-router-outlet></ion-router-outlet>
<app-menu-for-client></app-menu-for-client>
</ion-buttons>
</ion-content>
浏览.页面.模块.ts看起来像这样:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { BrowsePageRoutingModule } from './browse-routing.module';
import { BrowsePage } from './browse.page';
import {SearchbarModule} from "../Components/searchbar/searchbar.module";
import {CategoryItemModule} from "../Components/category-item/category-item.module";
import {ComponentsModule} from "../Components/Components.module";
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
BrowsePageRoutingModule,
SearchbarModule,
CategoryItemModule,
ComponentsModule
],
declarations: [BrowsePage],
exports: []
})
export class BrowsePageModule {}
有人能告诉我我做错了什么吗?
1条答案
按热度按时间xj3cbfub1#
本发明发现: