angular - ionic 3 : hide ion-footer on login page

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. 我在登录 Controller 上创建了一个变量，但是 ion-footer 在 ion-content 之外，所以我无法访问这个变量(即使使用点符号)

2. 我用全局变量创建了一个外部服务，并试图从页脚访问它，但我无法访问

---

1。尝试访问 LoginController 的变量

登录.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’”，因为我无法访问ion-footer 标签login_data强>

2。创建服务来管理全局数据

我创建了这个服务global-data:

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}
  ]

而且我还在 ma​​in.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 上注入(inject)服务，我可以在那里设置和获取信息，但同样，我无法从页脚访问该服务。

---

• 最好的解决方法是什么？

Answer 1

我建议在这里使用事件。

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>

登录.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});
    }
}

希望对您有所帮助。