html - 根据组件更改侧边菜单列表项
问题描述
我有一个侧面菜单和 3 个组件,即仪表板、信息和注销。当我在仪表板组件中时,侧面菜单应该有注销离子项。
当我在 Info 组件中时,sidemenu 应该有 Dashboard 和 logout ion-items..
基本上,如何根据不同的组件更改菜单离子项
提前致谢...
app.component.html
<ion-app>
<ion-split-pane>
<ion-menu side="end">
<ion-header>
<ion-toolbar>
<ion-title>{{'app.menu' | translate}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" (click)="myFunction(p)">
<ion-item [routerLink]="[p.url]">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
app.component.ts
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
public pages: Array<{title: string, url: string, icon: string}>;
public appPages = [
{
title: 'Dashboard',
url: '/dashboard',
icon: 'tablet-portrait'
},
{
title: 'Info',
url: '/info',
icon: 'information-circle'
}
];
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
public translate: TranslateService
) {
this.initializeApp();
// set i18n
translate.setDefaultLang('en');
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
解决方案
推荐阅读
- angular - 如何在 angular 中为 formArray 中的表单控件设置验证器
- mongodb - 在一个管道中查询多个集合 - MongoDB
- node.js - 如何通过 Axios 将复杂对象从反应发布到节点?
- react-native - 带有 Expo Run 的 react-native-ble-plx - 无法构建
- python - 将数字格式应用于 pandas.io.formats.style.Styler 以导出到 excel
- reactjs - 为 React App 创建可维护的身份验证系统
- flutter - Flutter:处理 LongPressed 和 LongPressDraggable 的 GestureDetector
- python - 如何“忽略”使用 Python-Mockito 的方法?
- java - 忽略硒中的加载
- sql - 获取某一列不重复的所有行