在不同的组件中添加离子菜单

Question

我正在更新现有的离子/角度应用程序，并希望对代码的影响尽可能小。 我的目标是添加一个汉堡菜单，就像许多其他应用程序中存在的那样。 我的困难来自项目架构。

header 是在一个独特的组件导航栏中创建的。 它管理不同的状态和上下文。 每个页面、模态等...设置自己的ion-header标签，但随后其内容（主要是ion-toolbar ）在专用的导航栏组件中进行管理。

这是代码的简化工作版本：

app.component.html

<ion-app>
    <ion-menu content-id="main-content">
        <ion-header>
            <ion-toolbar>
                <ion-title>Menu Content</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content class="ion-padding">This is the menu content.</ion-content>
    </ion-menu>

    <ion-router-outlet *ngIf="isLoggedIn" id="main-content"></ion-router-outlet>
</ion-app>

关于.page.html

<ion-header>
    <nav-bar [title]="'title.about'"></nav-bar>
</ion-header>

<ion-content padding>
    <!-- custom page content -->
</ion-content>

导航栏.html

<ion-toolbar>
    <ion-buttons slot="start">
        <ion-button *ngIf="!isModal" (click)="goToPrevious()">
            <ion-icon name="chevron-back"></ion-icon>
        </ion-button>
        <ion-menu-button></ion-menu-button>
    </ion-buttons>

    <ion-title class="title-wrapper" slot="primary">{{ title }}</ion-title>
</ion-toolbar>

导航栏有效（如标题所示，正确显示为后退按钮），但汉堡按钮除外：它未显示在页面上。 在开发人员控制台中，我可以看到元素被添加到页面中，但在视觉上看不到。 如果我在上面添加一个“显示：块”，它就会“神奇地”出现，这显然感觉不对。

我错过了什么，为什么按钮没有自己显示？

Answer 1

该解决方案的灵感来自于 Alon Laniado Bundayy Olayinka 在此线程上的帖子

• 首先，我无视使用离子菜单，我最终更喜欢自己制作。
• 其次，应答器必须与我的新组件中的 rest 一起移动。 在每一页上都有应答器是没有逻辑的，然后是外面的内容
• 最后，在模块中制作这个新组件更容易、更清洁和更坚固，以便于在其他任何地方注入。

这是我为任何偶然发现这里的人准备的不同文件。

应用程序/模块/共享/shared.module.ts

    import { CommonModule } from '@angular/common';
    import { NgModule } from '@angular/core';
    import { IonicModule } from "@ionic/angular";
    
    import { NavBar } from "./nav/nav";
    
    @NgModule({
        declarations: [NavBar],
        imports: [
            CommonModule,
            IonicModule,
        ],
        exports: [NavBar],
    })
    export class SharedModule { }

应用程序/模块/共享/导航栏/nav.ts

    import { Location } from '@angular/common';
    import { Component, Input, OnInit } from '@angular/core';
    import { NavController } from '@ionic/angular';
    
    @Component({
        selector: 'navbar',
        templateUrl: 'navbar.html',
        styleUrls: ['nav.scss'],
    })
    export class NavBar implements OnInit {
        @Input() public title = '';
    
        constructor(
            public location: Location,
            public navCtrl: NavController
        ) { }
    }

应用程序/模块/共享/导航/导航.html

<header>
    <nav>
        <div class="navbar__container">
            <div class="navbar__left">
                <!-- Navigation button -->
                <button aria-label="navigation-button">
                    <img src="assets/imgs/menu/menu-back.svg">
                </button>
                <!-- Burger menu -->
                <button aria-label="menu-button">
                  <img [src]="toggleBurgerMenu? 'assets/imgs/menu/burger-close.svg' : 'assets/imgs/menu/burger-open.svg'">
                </button>
            </div>
            <div class="navbar__right">
                <!-- Page title-->
                <span class="text text__size--regular text--primary">{{ title }}</span>
            </div>
        </div>
    </nav>
</header>

然后，这个 SharedModule 被添加到 app.module.ts 的imports数组中，并添加到应该使用它的特定组件上：

<navbar [title]="custom-title"></navbar>

请注意，此导入和使用将针对每个后续模块或页面进行复制。