Navigation 离子-菜单活动状态在单击时不改变

我使用的是离子侧菜单应用程序。 上图突出了我的问题。我希望在导航到特定页面时更改菜单的活动状态。 单击要导航的菜单项而不是单击要导航的其他任何位置时，菜单状态工作正常

在主页上单击“转到列表”时，我在我的主页中使用以下代码

从'@angular/core'导入{Component}；
从'ionic angular'导入{NavController}；
从“../list/list”导入{ListPage}；
@组成部分({
选择器：“主页”，
templateUrl:'home.html'
})
导出类主页{
listPage=listPage；
构造函数（公共navCtrl:NavController）{
}
哥特式的{
this.navCtrl.setRoot（this.listPage）；
}
}

我自己找到了答案，因此将其发布给其他人以供将来参考

在ngAfterViewInit（）中添加了代码，似乎可以工作

ngAfterViewInit（）在每次页面状态更改时都会被调用，view.instance.constructor.name为您提供当前页面的构造函数名称，您只需将其与菜单数组进行比较，找出您导航到的页面，并将其设置为活动页面即可

请参阅下面的完整代码

从'@angular/core'导入{Component，ViewChild}；
从“离子角度”导入{Nav，Platform}；
从'@ionic native/status bar'导入{StatusBar}；
从'@ionic native/SplashScreen'导入{SplashScreen}；
从“../pages/home/home”导入{HomePage}；
从“../pages/list/list”导入{ListPage}；
从“../pages/gallery/gallery”导入{GalleryPage}；
@组成部分({
templateUrl:'app.html'
})
导出类MyApp{
@ViewChild（导航）导航：导航；
rootPage:any=主页；
动态页面：任意；
页面：数组；
构造函数（公共平台：平台，公共状态栏：状态栏，公共splashScreen：splashScreen）{
这是.initializeApp（）；
//用于ngFor和导航的示例
此页=[
{title:'Home'，组件：主页，活动：false}，
{title:'List'，组件：ListPage，活动：false}，
{标题：'Gallery'，组件：GalleryPage，活动：false}
];
this.activePage=this.pages[0]；
}
ngAfterViewInit（）{
this.nav.viewdindenter.subscribe（（视图）=>{
for（设i=0；i{
//好了，平台准备好了，我们的插件也可以使用了。
//在这里，您可以做任何您可能需要的更高级别的本地操作。
this.statusBar.styleDefault（）；
这个.splashScreen.hide（）；
});
}
openPage（第页）{
//将内容导航重置为仅包含此页面
//我们不希望在这种情况下显示“后退”按钮
this.nav.setRoot（page.component）；
this.activePage=page；
}
选中活动（第页）{
//log（page.title，this.activePage.title，page==this.activePage）；
返回页面===this.activePage；
}
}

您还可以添加相应的HTML吗？或者更好地创建一个？