有人可以向我解释为什么我在这段代码中看不到连接状态吗？

Question

我需要有关 ionic Network 插件的帮助。这是一个代码，但它对我不起作用。没有控制台日志或任何其他模式。没有错误。 在顶部

import { Network } from '@ionic-native/network';

ionViewDidLoad() {
    this.getWarrentsNumber();
    let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
        console.log('network was disconnected :-(');
    });

    disconnectSubscription.unsubscribe();

    let connectSubscription = this.network.onConnect().subscribe(() => {
        console.log('network connected!');
        setTimeout(() => {
            if (this.network.type === 'wifi') {
                console.log('we got a wifi connection, woohoo!');
            }
        }, 3000);
    });

    connectSubscription.unsubscribe();
}

Answer 1

这是插件官方github repo的引用

在线事件在之前未连接的设备收到 网络连接以允许应用程序访问 Internet。它 依赖与连接 API 相同的信息，并在 connection.type 从 NONE 更改为任何其他值。

如您所见，onConnect 只会在之前未连接的设备收到网络连接时发出一些东西。

要在启动时检查设备是否在线，您可以直接检查this.network.type

或者

您可以创建一个服务来处理所有这些

@Injectable()
export class MyNetworkService implements OnInit {
  public connection: BehaviorSubject<string> = new BehaviorSubject(null);
  constructor(private network: Network, private platform: Platform) {

    this.connection = this.network.type;
    this.platform.ready().then(() => {
      this.network.onConnect().subscribe(() => {
        this.connection = 'something';
      });
      this.network.onDisconnect().subscribe(() => {
        this.connection = 'none';
      });
    });
  }

  ngOnInit() {
    this._setCurrentConnectionType();

    this.platform.ready().then(() => {
      this.network.onConnect().pipe(timer(3000)).subscribe(this._onConnectHandler);
      this.network.onDisconnect().pipe(timer(3000)).subscribe(this._onDisconnectHandler);
    });
  }

  private _onConnectHandler= () => this.connection.next(this.network.type);

  private _onDisconnectHandler = () => this.connection.next('offline');
}

然后您可以在任何地方注入您的服务并订阅连接。

constructor(private myNetworkService: MyNetworkService) {
  this.myNetworkService.connection.subscribe(type => {
    // you might filter out nulls
    // Before subscribe add .pipe(filter(type => type !== null))
  })

}

Answer 2

将您的变量connectSubscription 和disconnectSubscription 声明为类属性，然后尝试在ioniViewWillLeave() 挂钩而不是ionViewDidLoad() 中使用unsubscribe() 它们。 所以代码看起来类似于以下 -

connectSubscription: any;
disconnectSubscription: any;

ionViewDidLoad() {
    this.getWarrentsNumber();
    this.disconnectSubscription = this.network.onDisconnect().subscribe(() => {
        console.log('network was disconnected :-(');
    });

    this.connectSubscription = this.network.onConnect().subscribe(() => {
        console.log('network connected!');
        setTimeout(() => {
            if (this.network.type === 'wifi') {
                console.log('we got a wifi connection, woohoo!');
            }
        }, 3000);
    });
}

ioniViewWillLeave() {
    this.disconnectSubscription.unsubscribe();
    this.connectSubscription.unsubscribe();
}

Answer 3

该代码可以正常工作，但它可以工作依赖于 android 或 ios 等平台。我认为它可能无法控制浏览器上的任何内容。请针对平台设备测试您的应用程序。

否则你可以使用 ngOnInit() 代替 ionViewDidLoad();