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>

我希望能够在我的登录页面上隐藏页脚，我尝试了这两件事：

我在登录控制器上创建了一个变量，但 ion-footer 在 ion-content 之外，因此我无法访问此变量（即使使用点表示法）
我使用全局变量创建了一个外部服务，并尝试从页脚访问它，但我无法

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'未定义”，因为我无法访问 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}
  ]

我还在 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});
    }
}

希望这会对你有所帮助。

离子3：在登录页面隐藏离子页脚

1。试图访问LoginController的变量

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

1 个答案: