角度ngOnDestroy

编程问答 2022-06-12

问题描述

我一直试图在应用程序上设置网络插件作为服务，以判断是否有互联网。

在我的示例中，我设置了两个组件：

  1. 带有网络监听器的HOME组件直接在其中实现，
  2. 订阅了可在networkService中观察到的BehavIoUrSubject的TEST组件

我的问题是当我从一个导航到另一个导航时试图销毁这些组件。加载应用程序的组件永远不会被破坏。即使我在ngOnDestroy（）顶部实现了@HostListener（'window：beforeunload'）之类的东西。

我已经在这两个组件上实现了ngOnDestroy，以分别删除侦听器或取消订阅networkServices的可观察对象。

我注意到，如果我在“首页”上刷新应用程序

  1. 我导航到TEST，并且HOME.ngOnDestroy（）没有被调用。
  2. 当我从TEST导航回到HOME时，会调用TEST.ngOnDestroy（）。

Console output on scenario above

如果我在TEST上刷新了应用程序，则会发生相同的行为，但是却相反

  1. 我导航到HOME，并且TEST.ngOnDestroy（）没有被调用。
  2. 当我从HOME导航回到TEST时，会调用TEST.ngOnDestroy（）。

为了防万一，我已将项目上传到公共git中： https://github.com/jjgl/ionicNetworkCapacitorTests/

但这是主要部分：

首页

import { Component,OnInit,OnDestroy } from '@angular/core';
import { Plugins,NetworkStatus,PluginListenerHandle } from '@capacitor/core';

const { Network } = Plugins;

@Component({
  selector: 'app-home',templateUrl: 'home.page.html',styleUrls: ['home.page.scss'],})
export class HomePage implements OnInit,OnDestroy {
  networkStatus: NetworkStatus;
  networkListenerHome: PluginListenerHandle;

  async ngOnInit() {
    this.networkListenerHome = Network.addListener('networkStatusChange',(status) => {
      console.log("Home Page Network status changed",status);
      this.networkStatus = status;
    });

    this.networkStatus = await Network.getStatus();
  }

  ngOnDestroy() {
    console.log('home destroyed')
    this.networkListenerHome.remove();
  }
}

测试

import { Component,OnDestroy,OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { ConnectionStatus,NetworkService } from 'src/app/services/network.service';

@Component({
  selector: 'app-test-page',templateUrl: './test-page.page.html',styleUrls: ['./test-page.page.scss'],})

export class TestPagePage implements OnInit,OnDestroy {
  subscription : Subscription
  private statusOnline : boolean;

  constructor(private networkService: NetworkService) {}

  async ngOnInit() {
    console.log('hola')
    this.subscription = this.networkService.onNetworkChange().subscribe((status: ConnectionStatus) => {
      this.statusOnline = status == ConnectionStatus.Online ? true : false;
      console.log('network change,status:',status);
    })
  }

  ngOnDestroy() { 
    console.log('test destroyed')
    this.subscription.unsubscribe()
  }

}

网络服务

import { Injectable,PluginListenerHandle } from '@capacitor/core';
import { BehaviorSubject,Observable } from 'rxjs';

const { Network } = Plugins;

export enum ConnectionStatus {
  Online,Offline
}

@Injectable({
  providedIn: 'root'
})

export class NetworkService implements OnDestroy {

  private netStatus: BehaviorSubject<ConnectionStatus> = new BehaviorSubject(ConnectionStatus.Offline);
  networkStatus: NetworkStatus;
  networkListener: PluginListenerHandle;

  constructor() { 
    this.networkListener = Network.addListener('networkStatusChange',(status) => {
      console.log("Service Network status changed",status);
      this.networkStatus = status;
      let auxStatus = status && status.connected ? ConnectionStatus.Online : ConnectionStatus.Offline;
      this.netStatus.next(auxStatus)
    });
    this.initialState()
  }
  

  private async initialState(){
    this.networkStatus = await Network.getStatus();
    let auxStatus = this.networkStatus && this.networkStatus.connected ? ConnectionStatus.Online : ConnectionStatus.Offline;
    this.netStatus.next(auxStatus)
  }
  public onNetworkChange(): Observable<ConnectionStatus> {
    return this.netStatus.asObservable();
  }
 
  public getCurrentNetworkStatus(): ConnectionStatus {
    return this.netStatus.getValue();
  }

  ngOnDestroy(): void {
    console.log('services destroyed')
    this.networkListener.remove();
  }


}

不用说我是Angular的新手，所以也可以指出其他事情，欢迎所有评论。

PS：我已经在networkService上实现了ngOnDestroy，但我没有从TEST调用它，因为在TEST.ngOnDestroy首次被调用后导航回TEST时不会重新实例化服务。

解决方法

您不能在服务中使用Angular生命周期。只能在组件内部使用。

请致电Network.addListener进入app.component.ts。

...
export class AppComponent implements OnInit {
  subscription : Subscription
  private statusOnline : boolean;

  constructor(private networkService: NetworkService) {}

  async ngOnInit() {
    this.networkListener = Network.addListener('networkStatusChange',(status) => {
      console.log("Service Network status changed",status);
      this.networkStatus = status;
      let auxStatus = status && status.connected ? ConnectionStatus.Online : ConnectionStatus.Offline;
      this.networkService.netStatus.next(auxStatus) // Push the new status to NetworkService behaviorSubject
    });
  }
}

app.component.ts是一个根单例组件，因此在刷新浏览器选项卡之前不会破坏或刷新它。现在，您可以像已经在使用任何组件一样在NetworkService中使用netstatus。

...
export class NetworkService {

  private netStatus: BehaviorSubject<ConnectionStatus> = new BehaviorSubject(ConnectionStatus.Offline);

  public onNetworkChange(): Observable<ConnectionStatus> {
    return this.netStatus.asObservable();
  }
 
  public getCurrentNetworkStatus(): ConnectionStatus {
    return this.netStatus.getValue();
  }
}
angularangularcapacitorionic-frameworkngondestroy