Question

我需要在Ionic项目中进行设备检测，因此我在此处按照说明安装了@ionic-native/device插件：https://ionicframework.com/docs/native/device/

但是，当我在组件内部连接它时，然后运行ionic serve来预览更改，console.log返回Device对象，所有值都设置为null，当我在尝试使用个人财产，例如this.device.model：

以下是我在组件中使用它的方法：

import {Device} from "@ionic-native/device";
// ...

@Component({
    // ...
})
export class MyComponent {

    constructor(private device: Device) {
    }

    ngOnInit() {
        console.log(this.device);
    }

}

我已将其添加到AppModule：

import {Device} from "@ionic-native/device";
// ...

@NgModule({
    // ...
    providers: [
        Device
    ]
})
export class AppModule() {
}

Cordova设备插件已自动注入config.xml：

<?xml version='1.0' encoding='utf-8'?>
<widget <!-- ... --> >
    <!-- ... -->
    <plugin name="cordova-plugin-device" spec="2.0.0" />
</widget>

这是我的Ionic堆栈（至少应该与问题相关的包）：

"@angular/*": "^5.2.4",      // all packages
"@ionic-native/*": "4.5.2",  // all packages

"@ionic-native/device": "4.5.2"
"ionic-angular": "3.9.2",
"cordova-plugin-device": "2.0.0",
"typescript": "2.6.2"

谢谢！

更新

我可以通过运行以下方式在浏览器中获取设备详细信息：

cordova run browser

这假设您已将浏览器添加为平台，如果没有运行：

ionic cordova platform add browser

（来自@AndrewLively发布的答案中的链接：https://stackoverflow.com/a/49034015/448816）

Answer 1

如果您使用ionic serve在浏览器中运行，那么大多数离子原生插件都不会起作用，因为它不被离子视为有效的浏览器平台。

这没有详细记录，但在issue in the ionic-native repo中进行了讨论。

Answer 2

应该看到已安装的软件包，并在“ package.json”中看到它们具有相同的版本

Core和本机软件包必须具有相同的版本，否则本机软件包不能更大。

文件夹“平台”必须删除

使用这些命令

    ionic build

    ionic cordova platform add browser

    cordova run browser

.ts的代码

console.log('Device Model is: ' + this.device.model);

工作正常！

离子本机设备插件@ ionic-native / device返回所有空值

2 个答案: