如何解决角度ngOnDestroy
我一直试图在应用程序上设置网络插件作为服务,以判断是否有互联网。
在我的示例中,我设置了两个组件:
我的问题是当我从一个导航到另一个导航时试图销毁这些组件。加载应用程序的组件永远不会被破坏。即使我在ngOnDestroy()顶部实现了@HostListener('window:beforeunload')之类的东西。
我已经在这两个组件上实现了ngOnDestroy,以分别删除侦听器或取消订阅networkServices的可观察对象。
我注意到,如果我在“首页”上刷新应用程序
如果我在TEST上刷新了应用程序,则会发生相同的行为,但是却相反
为了防万一,我已将项目上传到公共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();
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。