Question

在ionic 4移动应用程序中单击一个按钮后，我试图更改侧面菜单的内容。目前，菜单内容在我所有页面上都保持不变。这是我的app-component.html中的代码：

  <ion-split-pane>
    <ion-menu type="overlay">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [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>

我如何做到这一点，以便在单击按钮时，侧面菜单的内容会改变？例如，当前，我的侧菜单显示了“首页”和“列表”，它们分别指向相应页面。单击按钮后，我希望它从“主页” +“列表”更改为“预订” +“个人资料”。

PS：上周我开始学习Ionic 4和angular，所以我被认为是初学者，因此，非常感谢您进行链接或某种逐步演示。

Answer 1

然后，您要做的就是更改appPages所引用的内容。假设您路由到的组件/页面知道其补给。在这种情况下，您所需要做的就是让您的导航组件知道这些页面是什么。

例如，可以由PagesToNavigateService处理此通信，您所有可访问的组件都需要此通信。可能看起来像：

class PagesToNavigateService{
  pages$: BehaviourSubject<{url: string, icon: string, title: string}[]> =
    new BehaviourSubject([
      {url:'/home', icon:'yourHomeIcon', title: 'Home'},
      {url:'/list', icon:'yourListIcon', title: 'List'}
    ]);
}

之后，您可以注入服务并在您的pages$中订阅NavComponent

constructor ( private pagesToNavigateService PagesToNavigateService) {}
this.appPages$ = this.pagesToNavigateService.pages$;

和

<ion-list *ngIf="appPages$ | async as appPages> <---- Here happens some "magic"
  <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
    <ion-item [routerDirection]="'root'" [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>

现在，您只需要路由到组件即可更新这些路由，例如以下示例：

class OtherComponent implements OnInit{
  mySupPages= [{url:'/someURL', icon:'someIcon'}];
  constructor(private pagesToNavigateService PagesToNavigateService){}
  ngOnInit() {
    this.pagesToNavigateService.pages$.next(this.mySupPages);
  }
}

这应该在您加载OtherComponent后更新您的导航，除非特定于离子的东西无法正常工作，否则我对离子的处理还不够。

单击ionic 4移动应用程序中的按钮后，如何更改侧面菜单的内容？

1 个答案: