模块“AppModule”导入的意外指令“Slides”。请添加@NgModule 注释

Question

我正在尝试构建一个非常简单的应用程序（ionic 3.19）：使用手机摄像头点击按钮拍照，将它们保存在数组中，然后通过幻灯片组件像轮播一样显示。但得到一个错误的标题。代码：

app.module.ts，从 ionic-angular 导入 Slide

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

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


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

home.ts，包含拍照功能

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  
  public image: string = null;
  public base64Image: string[];
  public extraOptions : {};

  constructor(private camera: Camera) {
    this.base64Image = new Array();
    this.extraOptions = {
      pager: true,
      paginationClickable: true,
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: 2000
      }
  }  

  takePicture() {
    let options: CameraOptions = {
      destinationType: this.camera.DestinationType.DATA_URL,
      targetWidth: 1000,
      targetHeight: 1000,
      quality: 100
    }
    this.camera.getPicture( options )
    .then(imageData => {
      this.image = 'data:image/jpeg;base64,${imageData}';
      this.base64Image.push(imageData);
      let iData = this.base64Image.map(o => o).join(', ');
      console.log("iData is " + iData);
    })
    .catch(error =>{
      console.error( error );
    });
  } 

    
}

home.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Manage your photos!
    </ion-title>    
  </ion-navbar>
</ion-header>

<ion-content padding>    
        <button ion-button block (click)="takePicture()">Photo</button>
        <!--<img [src]="image" *ngIf="image" />-->
        <div *ngIf="base64Image.length == 0"> <br/><br/> &nbsp; &nbsp;Click on the camera icon to take pictures!</div>
        <ion-slides pager autoplay="true" pager="true" [options]="extraOptions" *ngIf="base64Image.length > 0">
          <ion-slide *ngFor="let image of base64Image">
            <img [src]="image" />
          </ion-slide>
        </ion-slides>
</ion-content>

有什么想法吗？非常感谢！

Answer 1

不需要在app.module.ts中导入Slides，直接在组件中导入即可：

import { Slides } from 'ionic-angular';

别忘了在组件中添加幻灯片作为 ViewChild：

@ViewChild(Slides) slides: Slide

阅读更多official docs。