Dynamic Ionic5：使用sharedModule在所有应用程序页面上设置页脚，并从app.component控制页脚（开/关）

我使用带有菜单的Ionic5创建了一个新应用程序。我试图在多个页面上使用页脚（现在只在主页上）。首先，我创建了一个SharedModule并导入到app.module.ts的imports数组中。我已经在shared.module.ts的声明和导出数组中添加了页脚组件。我还在每个page.module.ts的imports数组中添加了SharedModule，最后在每个page.html中添加了

。 它按预期工作，在所有页面中显示页脚。但是现在我需要从我的app.component控制（开/关）这个页脚，以响应特定事件，例如，当互联网不可用时（这部分不是问题）

footer.component.ts

import { Component, OnInit } from '@angular/core';
import { FooterService } from 'src/app/footer.service';
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent implements OnInit {

  public FooterEnabled: boolean= false;

  constructor() { }
  ngOnInit() {
  }
}

import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Network } from '@ionic-native/network/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

export class AppComponent implements OnInit {

  public selectedIndex = 0;
  public appPages = [
    {
      title: 'Página 1',
      url: 'home',
      icon: 'mail'
    }, 
    {
      title: 'Página 2',
      url: 'pagina2',
      icon: 'paper-plane'
    },
    {
      title: 'Página 3',
      url: 'pagina3',
      icon: 'heart'
    }
  ];  

    constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private network: Network
    ) {
      
    this.initializeApp();   
    
  }// Fin constructor

  no_internet() {
    alert("No internet!")
   // In this point make FooterEnabled = true (from the footer component)
  }

  si_internet() {
    alert("Whith internet!") 
    //In this point make FooterEnabled = false (from the footer component)
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      
    });
  }

  ngOnInit() {

    let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
      setTimeout(() => {
        if (this.network.type !== 'none') {
          this.si_internet();
        }
        else {
          this.no_internet();

        }
      }, 1000);
      
    });
    // watch network for a connection
    let connectSubscription = this.network.onConnect().subscribe(() => {
      setTimeout(() => {
        if (this.network.type !== 'none') {
          this.si_internet();
        }
        else {
          this.no_internet(); 
        }
      }, 3000);
    });

    const path = window.location.pathname.split('/')[1];
    if (path !== undefined) {
      this.selectedIndex = this.appPages.findIndex(page => page.title.toLowerCase() === path.toLowerCase());
    }
  }
}

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent implements OnInit {
  @Input() FooterEnabled : string;
  //public FooterEnabled: boolean= false;

  constructor() { }
  ngOnInit() {
  }
}

<div class="footer-conn" *ngIf="FooterEnabled == 'on'">
    Alert!
</div>

如果显示或不显示页脚，则启用页脚的变量控件，并且必须可以从app.component进行修改

footer.component.html

<div class="footer-conn" *ngIf="FooterEnabled">
    Alert!
</div>

app.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FooterComponent } from '../components/footer/footer.component';

@NgModule({
  declarations: [FooterComponent],
  imports: [
    CommonModule
  ],
  exports: [
    FooterComponent, CommonModule
  ]
})
export class SharedFooterModule { }

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Network } from '@ionic-native/network/ngx';

import { SharedFooterModule } from './shared/sharedfooter.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    SharedFooterModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Network,
    
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { FooterService } from 'src/app/footer.service';
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent implements OnInit {

  public FooterEnabled: boolean= false;

  constructor() { }
  ngOnInit() {
  }
}

import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Network } from '@ionic-native/network/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

export class AppComponent implements OnInit {

  public selectedIndex = 0;
  public appPages = [
    {
      title: 'Página 1',
      url: 'home',
      icon: 'mail'
    }, 
    {
      title: 'Página 2',
      url: 'pagina2',
      icon: 'paper-plane'
    },
    {
      title: 'Página 3',
      url: 'pagina3',
      icon: 'heart'
    }
  ];  

    constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private network: Network
    ) {
      
    this.initializeApp();   
    
  }// Fin constructor

  no_internet() {
    alert("No internet!")
   // In this point make FooterEnabled = true (from the footer component)
  }

  si_internet() {
    alert("Whith internet!") 
    //In this point make FooterEnabled = false (from the footer component)
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      
    });
  }

  ngOnInit() {

    let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
      setTimeout(() => {
        if (this.network.type !== 'none') {
          this.si_internet();
        }
        else {
          this.no_internet();

        }
      }, 1000);
      
    });
    // watch network for a connection
    let connectSubscription = this.network.onConnect().subscribe(() => {
      setTimeout(() => {
        if (this.network.type !== 'none') {
          this.si_internet();
        }
        else {
          this.no_internet(); 
        }
      }, 3000);
    });

    const path = window.location.pathname.split('/')[1];
    if (path !== undefined) {
      this.selectedIndex = this.appPages.findIndex(page => page.title.toLowerCase() === path.toLowerCase());
    }
  }
}

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent implements OnInit {
  @Input() FooterEnabled : string;
  //public FooterEnabled: boolean= false;

  constructor() { }
  ngOnInit() {
  }
}

<div class="footer-conn" *ngIf="FooterEnabled == 'on'">
    Alert!
</div>

home.module.ts（作为示例）

---

我尝试过在footer.component和app.component.ts中导入一个实现可观察性的服务，但没有成功。我将感谢你的贡献

也许您可以像下面那样，向页脚组件添加输入：

footer.component.ts

import { Component, OnInit } from '@angular/core';
import { FooterService } from 'src/app/footer.service';
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent implements OnInit {

  public FooterEnabled: boolean= false;

  constructor() { }
  ngOnInit() {
  }
}

import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Network } from '@ionic-native/network/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

export class AppComponent implements OnInit {

  public selectedIndex = 0;
  public appPages = [
    {
      title: 'Página 1',
      url: 'home',
      icon: 'mail'
    }, 
    {
      title: 'Página 2',
      url: 'pagina2',
      icon: 'paper-plane'
    },
    {
      title: 'Página 3',
      url: 'pagina3',
      icon: 'heart'
    }
  ];  

    constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private network: Network
    ) {
      
    this.initializeApp();   
    
  }// Fin constructor

  no_internet() {
    alert("No internet!")
   // In this point make FooterEnabled = true (from the footer component)
  }

  si_internet() {
    alert("Whith internet!") 
    //In this point make FooterEnabled = false (from the footer component)
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      
    });
  }

  ngOnInit() {

    let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
      setTimeout(() => {
        if (this.network.type !== 'none') {
          this.si_internet();
        }
        else {
          this.no_internet();

        }
      }, 1000);
      
    });
    // watch network for a connection
    let connectSubscription = this.network.onConnect().subscribe(() => {
      setTimeout(() => {
        if (this.network.type !== 'none') {
          this.si_internet();
        }
        else {
          this.no_internet(); 
        }
      }, 3000);
    });

    const path = window.location.pathname.split('/')[1];
    if (path !== undefined) {
      this.selectedIndex = this.appPages.findIndex(page => page.title.toLowerCase() === path.toLowerCase());
    }
  }
}

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent implements OnInit {
  @Input() FooterEnabled : string;
  //public FooterEnabled: boolean= false;

  constructor() { }
  ngOnInit() {
  }
}

<div class="footer-conn" *ngIf="FooterEnabled == 'on'">
    Alert!
</div>

footer.component.ts

import { Component, OnInit } from '@angular/core';
import { FooterService } from 'src/app/footer.service';
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent implements OnInit {

  public FooterEnabled: boolean= false;

  constructor() { }
  ngOnInit() {
  }
}

import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Network } from '@ionic-native/network/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

export class AppComponent implements OnInit {

  public selectedIndex = 0;
  public appPages = [
    {
      title: 'Página 1',
      url: 'home',
      icon: 'mail'
    }, 
    {
      title: 'Página 2',
      url: 'pagina2',
      icon: 'paper-plane'
    },
    {
      title: 'Página 3',
      url: 'pagina3',
      icon: 'heart'
    }
  ];  

    constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private network: Network
    ) {
      
    this.initializeApp();   
    
  }// Fin constructor

  no_internet() {
    alert("No internet!")
   // In this point make FooterEnabled = true (from the footer component)
  }

  si_internet() {
    alert("Whith internet!") 
    //In this point make FooterEnabled = false (from the footer component)
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      
    });
  }

  ngOnInit() {

    let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
      setTimeout(() => {
        if (this.network.type !== 'none') {
          this.si_internet();
        }
        else {
          this.no_internet();

        }
      }, 1000);
      
    });
    // watch network for a connection
    let connectSubscription = this.network.onConnect().subscribe(() => {
      setTimeout(() => {
        if (this.network.type !== 'none') {
          this.si_internet();
        }
        else {
          this.no_internet(); 
        }
      }, 3000);
    });

    const path = window.location.pathname.split('/')[1];
    if (path !== undefined) {
      this.selectedIndex = this.appPages.findIndex(page => page.title.toLowerCase() === path.toLowerCase());
    }
  }
}

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent implements OnInit {
  @Input() FooterEnabled : string;
  //public FooterEnabled: boolean= false;

  constructor() { }
  ngOnInit() {
  }
}

<div class="footer-conn" *ngIf="FooterEnabled == 'on'">
    Alert!
</div>

将其放在app.component.html上，如下所示：

<app-footer FooterEnabled="status" ></app-footer>

我在app.component.html上尝试了

。该消息仅在菜单页面（通过app.component）中可用，但不会传播到其他页面。此外，只有当我选择一个菜单项进行页面更改且没有自动更改时，该消息才可见。还有别的想法吗？