Невозможно получить свойство 'DestinationType' с неопределенной или нулевой ссылкой в ​​ionic 3

Question

Я новичок для ионных приложений, и я пытаюсь сделать снимок, используя приведенный ниже код, но я получаю исключение, подобное Не удалось получить свойство 'DestinationType' с неопределенной или нулевой ссылкой , и я добавил ниже два плагинав мой проект

может кто-нибудь помочь мне, пожалуйста

$ плагин ionic cordova добавить cordova-plugin-camera-preview $ npm install --save @ ionic-native / camera-preview

home.ts:

export class HomePage {

  public base64Image: string;
  public photos : any;

  constructor(private camera: Camera) {
  }

  takePhoto() {
    const options : CameraOptions = {
      quality: 50, // picture quality
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }
    this.camera.getPicture(options) .then((imageData) => {
      this.base64Image = "data:image/jpeg;base64," + imageData;
      }, (err) => {
        console.log(err);
      });
  }
}

home.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="home">
  <ion-card>
    <ion-card-content>
      Hello World, this is my camera app

      <button (click)="takePhoto()">Take a Picture</button>

      Latest Picture:
      <img [src]="base64Image" *ngIf="base64Image" />
    </ion-card-content>
  </ion-card>
</ion-content>

app.module.ts:

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    CameraPreview
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Answer 1

Так как вы использовали cordova-plugin-camera-preview

$ ionic cordova plugin add cordova-plugin-camera-preview
$ npm install --save @ionic-native/camera-preview

Вам необходимо import

import { CameraPreview } from '@ionic-native/camera-preview';

Вот это example

import { CameraPreview, CameraPreviewPictureOptions, CameraPreviewOptions, CameraPreviewDimensions } from '@ionic-native/camera-preview';

constructor(private cameraPreview: CameraPreview) { }


// camera options (Size and location). In the following example, the preview uses the rear camera and display the preview in the back of the webview
const cameraPreviewOpts: CameraPreviewOptions = {
  x: 0,
  y: 0,
  width: window.screen.width,
  height: window.screen.height,
  camera: 'rear',
  tapPhoto: true,
  previewDrag: true,
  toBack: true,
  alpha: 1
};

// start camera
this.cameraPreview.startCamera(cameraPreviewOpts).then(
  (res) => {
    console.log(res)
  },
  (err) => {
    console.log(err)
  });


}

Затем добавьтеCameraPreview до провайдеров в app-module

import { CameraPreview } from '@ionic-native/camera-preview';

...

@NgModule({
  ...

  providers: [
    ...
    CameraPreview
    ...
  ]
  ...
})
export class AppModule { }

Официальная документация

Answer 2

Вы, вероятно, хотите использовать Камера , а не CameraPreview .Вы должны использовать инъекцию зависимостей Angular в inject экземпляр Camera для вашего компонента.Добавьте камеру в конструктор (и удалите public camera: Camera)

import { Camera, CameraOptions } from '@ionic-native/camera';

constructor(public camera: Camera) { }

. Вы можете следовать примеру от Ionic.

Вы можете прочитать о DI в документе Angular .