如何在 Angular 4 混合应用程序中使用 cordova 插件答案

【问题标题】：how to use cordova plugin in angular 4 hybrid application如何在 Angular 4 混合应用程序中使用 cordova 插件
【发布时间】：2017-10-28 18:23:35
【问题描述】：

我是这个结构的新手。我将相机插件添加到应用程序中并构建应用程序。它抛出以下错误。

D:/../CordovaApp/src/app/menu-bar/menu-bar.component.ts (20,15) 中的错误：类型“N”上不存在属性“相机” 飞行员'。

D:/../CordovaApp/src/app/menu-bar/menu-bar.component.ts (23,16) 中的错误：找不到名称“相机”。

谁能帮我摆脱这个问题。

/** 更新部分 **/

将两个变量添加到组件中后。应用程序构建成功，但是当我调试应用程序时，我没有将插件属性放入导航器。请参考下面附上的快照。

click on this link to open snap shot

【问题讨论】：

标签： angular cordova typescript cordova-plugins ngcordova

【解决方案1】：

Typescript 是一种类型化的语言。因此，无论何时使用任何基于 javascript 的库/插件，都必须确保相应的 type 可用。

在这里，您使用了导航器，它实际上是 JavaScript 或 Cordova 已知的，但 Typescript 不知道会导致此错误。

有两种方法可以解决这个问题。

安装相应的类型定义。 (http://definitelytyped.org/)

将导航器声明为 any 类型。

@Component({
  selector: 'app',
  template: `<button type="button" (touchend)="onCamera($event)">Camera</button>`
})
export class AppComponent {
  public onCamera(event) {
    const cameraOptions = {
      destinationType: (<any>Camera).DestinationType.FILE_URI
    };
    (<any>navigator).camera.getPicture(cameraSuccess, cameraError, cameraOptions);
  }
}

或

declare var navigator: any;
declare var Camera: any;

@Component({
  selector: 'app',
  template: `<button type="button" (touchend)="onCamera($event)">Camera</button>`
})
export class AppComponent {
  public onCamera(event) {
    const cameraOptions = {
      destinationType: Camera.DestinationType.FILE_URI
    };
    navigator.camera.getPicture(cameraSuccess, cameraError, cameraOptions);
  }
}

【讨论】：

我试过上面的例子，但我仍然面临同样的问题。错误：找不到名称“相机”。任何其他建议。
使用上面的代码，你得到浏览器控制台的错误或构建错误？如果您在浏览器控制台中遇到错误，请确保您在 config.xml 中启用了相机插件
似乎您也在使用相机常量（Camera.destinationType.FILE_URI 等）。你能声明相机也一样吗？声明 var Camera: any;或 (Camera).destinationType.FILE_URI 我相信，它会解决你的问题。
我在使用 'ng build' 命令构建 Angular 应用程序时出错
我已经修改了上面的代码，看看能不能解决你的问题。