ionic-framework - Unexpected directive 'Slides' imported by the module 'AppModule'. Please add a @NgModule annotation
问题描述
I'm trying to build a very simple app (ionic 3.19): using phone camera to take pictures clicking a button, saving them in an array and then displaying like a carousel through Slides component. But getting an error as the title. The code:
app.module.ts, where import Slide from ionic-angular
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, containing the function for taking the pictures
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/> 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>
Any ideas? Thank you very much!
解决方案
No need to import Slides in app.module.ts, import them directly in the component:
import { Slides } from 'ionic-angular';
and dont't forget to add Slides as ViewChild in component:
@ViewChild(Slides) slides: Slide
Read more on official docs.
推荐阅读
- windows - Git 和 Vim - git diff 格式错误,但 git commit --amend 正确
- javascript - 超时完成后多次运行去抖动功能
- python - tqdm 不计算 jupyter notebook 中的迭代次数
- android - 以编程方式更改软键盘中候选视图的颜色
- android - 有没有办法通过使用无障碍服务来检测屏幕/声音何时投射到另一台设备?
- github - github上的文件系统问题 - Discord.Js
- python - 从python中的列表中打印行空间
- java - 如何正确使用导入构建文件的目标?
- ios - Apple Catalyst 是否支持 iPhone
- python - 选择三个国家。对于每个国家/地区,找出最致命的日期(以最高新死亡人数衡量)。需要帮助用 Python 编写逻辑