离子3:在登录页面上隐藏离子页脚

Question

我克隆了侧面菜单startproject并在我的app.html上有这个结构:

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-footer>
  <ion-toolbar>
        MYFOOTER
  </ion-toolbar>
</ion-footer>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

我希望能够在登录页面上隐藏页脚,我尝试了以下两件事:

1. 我在登录控制器上创建了一个变量但是离子页脚在离子内容之外,因此我无法访问此变量(即使使用点表示法)

2. 我创建了一个带有全局变量的外部服务,并试图从页脚访问它,但我无法做到

---

1.尝试访问LoginController的变量

login.ts

...imports...

export class LoginPage {

    public login_data : any = {footerIsHidden: true}; 

    ...constructor & other stuff...
}

app.html

... 
<ion-footer *ngIf="!login_data.footerIsHidden" class="footer">
    MY FOOTER
</ion-footer>
...

我得到一个" 无法读取属性'footerIsHidden'未定义 "因为我无法访问离子页脚标签上的变量login_data

2.创建管理全局数据的服务

我创建此服务全局数据:

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

@Injectable()
export class GlobalDataService {
  public data:any = {};
}

我把它添加到我的app.module.ts:

import { GlobalDataService } from '../services/global-data/global-data';
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    ...
    GlobalDataService, <--- HERE
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

我还在main.ts上添加了它:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { GlobalDataService } from '../services/global-data/global-data';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule, [GlobalDataService]);

我读了最后一部分是必要的,因此可以在任何地方访问相同的服务实例.

如果我在LoginController上注入服务,我可以在那里设置并获取信息,但是我无法从页脚访问此服务.

---

• 哪个是最好的解决方法？

Answer 1

我建议events在这里使用.

app.component.ts

import { Events } from 'ionic-angular';

export class MyApp {
    public footerIsHidden: boolean = false;
    constructor(public events: Events) {
        events.subscribe('hideHeader', (data) => {
            this.footerIsHidden = data.isHidden;
        })
    }
}

app.html

<ion-footer *ngIf="!footerIsHidden" class="footer">
    MY FOOTER
</ion-footer>

Login.ts

import { Events } from 'ionic-angular';

export class LoginPage {
    constructor(public events: Events) { 
       events.publish('hideHeader', { isHidden: true});
    }

    ionViewWillLeave() {
        //Make footer visiable while leaving the page.
        this.events.publish('hideHeader', { isHidden: false});
    }
}

希望这会帮助你.