Angular 离子导入原生相机

Question

我有一个离子应用程序。我想在应用程序中打开相机。

在我导入的应用程序模块中，如下所示。

import { NgModule,ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { DataService } from './services/dataService';
import { SessionService } from './services/sessionService';
import { TransferService } from './services/TransferService';
import { ToasterService } from './services/ToasterService';
import { QflowService } from './services/qflowService';
import { Camera } from '@ionic-native/camera';//import in app.module.ts

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,FormsModule,HttpClientModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    DataService,SessionService,TransferService,ToasterService,QflowService,
    Camera
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

我用下面的命令创建了一个页面 ionic generate page newsq 然后。在此页面中，我想打开相机。在组件

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ViewWillEnter, Platform } from '@ionic/angular';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { QflowModel, Tags } from 'src/app/models/qflow';
import { URLS } from 'src/app/models/Url';
import { DataService } from 'src/app/services/dataService';
import { QflowService } from 'src/app/services/qflowService';

@Component({
  selector: 'app-newq',
  templateUrl: './newq.page.html',
  styleUrls: ['./newq.page.scss'],
})
export class NewqPage implements ViewWillEnter {
  qflow: QflowModel;
  tags: Tags[] = [];
  selectedTags = [];
  title = "";
  options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  }
  constructor(public platform: Platform, private camera: Camera, private qflowService: QflowService, private dataService: DataService, private router: Router) {
  }
  ionViewWillEnter(): void {
    const subj = new Subject<boolean>();
    this.qflowService.getData.pipe(takeUntil(subj)).
      subscribe(element => {
        subj.next(true); this.qflow = element;
        if (!this.qflow && this.qflow.examId == 0) { this.router.navigateByUrl("/home"); }
        this.getTags();
      });
  }
  getTags() {
    this.dataService.Post(URLS.url.qflow.TagsPage.getTags, { examId: this.qflow.examId, page: 1 }).subscribe(
      result => {
        this.tags = result;
      }
    );
  }
  getPicture() {
    this.platform.ready().then(() => {
      if (this.platform.is('cordova')) {
        this.camera.getPicture(this.options).then((imageData) => {
          let base64Image = 'data:image/jpeg;base64,' + imageData;
        }, (err) => {
          // Handle error
        });
      }
    })
  }
}

我的问题是，当我在应用程序模块中添加相机时，项目出现白色空白页面。我不知道我失踪的地方在哪里。我用了一天还是没找到解决方法。我的错误图片如下

我该如何解决这个问题？

提前致谢

Answer 1

我刚刚解决了 app.modules

中的更改问题

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

至

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

Angular 离子导入原生相机

Angular Ionic import Native Camera

angular

ionic-framework

camera

cordova-plugins