Question

我尝试在Ionic Project中添加侧面菜单。我可以添加此代码，但我需要其中包含我的用户的信息。这很复杂，因为侧面菜单在app.component.html中初始化，也就是说，在应用程序的开头，并且登录后获取了信息。

App.component.html

<ion-menu id='menu' [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>            
      <button ion-item>
        Preparaciones
      </button>           
      <button ion-item>
        Revisiones
      </button>  
      <button ion-item (click)='openCuenta()'>
       Cuenta
      </button>             
    </ion-list>
  </ion-content>
</ion-menu>
  <ion-nav #content [root]="rootPage"></ion-nav>`

我想是否可以使用此代码创建组件。添加用户信息后，如何在应用程序启动时添加该组件？

Answer 1

您可以使用提供者来提供您的用户信息。例如，如果您有一个具有“用户”属性的UserProvider，则可以执行以下操作：

在app.component.ts中：

...
export class MyApp {
  constructor(public userProvider: UserProvider) {
...

然后，在app.html中使用* ngIf指令：

<ion-menu id='menu' [content]="content">
    <ion-header>
        <ion-toolbar>
            <ion-title>Menu</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list *ngIf="userProvider.user">            
            <button ion-item>
                Preparaciones
            </button>           
            <button ion-item>
                Revisiones
            </button>  
            <button ion-item (click)='openCuenta()'>
            Cuenta
            </button>             
        </ion-list>
    </ion-content>
</ion-menu>

在Ionic中具有用户信息的SideMenu

1 个答案: