Ionic 当我点击图标时,离子Angular 侧菜单不显示

ih99xse1  于 2023-01-15  发布在  Ionic
关注(0)|答案(1)|浏览(193)

我试着用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 {}

有人能告诉我我做错了什么吗?

xj3cbfub

xj3cbfub1#

本发明发现:

<ion-menu contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Aktivitäten</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">

<ion-list>
  <ion-item routerLink="/login">
    <ion-label>Test</ion-label>
    <ion-icon name="mail"></ion-icon>
  </ion-item>
</ion-list>

  </ion-content>
</ion-menu>
<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
      <ion-title>Aktivitäten</ion-title>
    </ion-toolbar>
  </ion-header>

相关问题