从主页导航时导航到页面并突出显示菜单项

Question

我目前正在使用 Ionic 2+ 和 Angular 2 创建一个应用程序。它目前运行良好，但我在导航和突出显示菜单项时遇到了一些问题。我的应用主页上有一个联系按钮（home.html 和 home.ts）

我可以使用以下方法导航到正确的页面：

this.navCtrl.root(ContactPage)

但是页面 在菜单中没有像这样 突出显示（当我从侧边菜单导航时）：

我的 app.component.ts 中有一个 activePage 参数，当我单击一个侧边菜单项时，它会设置活动页面。通过在样式为真时加载菜单来检查此参数：

isActive(page: PageInterface){
    if(this.activePage == page)
    {
      return true
    }
}

当我点击主页上的按钮时，我不知道如何在 app.component.ts 中设置此参数从 home.ts。

有没有人有提示或技巧让我朝着正确的方向前进。

更多代码：

我如何生成菜单项的示例：

<ion-item [class.activeItem]="isActive(p)" no-lines *ngFor="let p of MiscPages" (click)="openPage(p)">

app.component.ts 页面列表的结构：

this.MiscPages = [
  { title: 'MENU.INFO_BTN', name: 'Information', component: InformationPage, icon: 'ios-information-circle' },
  { title: 'MENU.CONTACT_BTN', name: 'Contact', component: ContactPage, icon: 'ios-paper-plane' },
  { title: 'MENU.SETTINGS_BTN', name: 'Settings', component: SettingsPage, icon: 'ios-settings' }
]

Answer 1

像这样创建共享服务：

import { Injectable } from '@angular/core';

@Injectable()
export class SharedService {

  private currentPage: string;
  constructor() { }

  getData() {
    return this.currentPage;
  }

  setData(page) {
    this.currentPage = page;
  }
}

像这样在您的应用模块中导入服务：

import { SharedService } from './shared/shared.service'; //Change the path as per your file location

像这样将服务添加到提供程序数组：

@NgModule({
      declarations: [],
      imports: [],
      providers: [SharedService],
      bootstrap: [AppComponent]
    })

在您的组件中注入此服务并使用 get() 和 set() 方法保存和检索当前活动页面：

this.SharedService.setData('Current Active Page'); // To save current page
this.SharedService.getData('Current Active Page'); // To get current page

您可以根据从 getData() 方法获得的响应更改 css。我希望这是有道理的。

从主页导航时导航到页面并突出显示菜单项

Navigate to page and highlight menu item when navigating from home page

javascript

typescript

ionic2

angular2-template

angular