Неожиданная директива Slides, импортированная модулем AppModule. Добавьте аннотацию @NgModule

Я пытаюсь создать очень простое приложение (ionic 3.19): с помощью камеры телефона делать снимки, нажимая кнопку, сохраняя их в массиве, а затем отображая как карусель через компонент Slides. Но получаю ошибку в заголовке. Код:

app.module.ts, где импортировать слайд из ионно-углового

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>

Любые идеи? Большое спасибо!


ionic-framework ionic3
person JoseRM    schedule 02.10.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Не нужно импортировать слайды в app.module.ts, импортируйте их прямо в компонент:

import { Slides } from 'ionic-angular';

и не забудьте добавить слайды как ViewChild в компонент:

@ViewChild(Slides) slides: Slide

Подробнее читайте в официальных документах.

person theriddle2    schedule 02.10.2018
comment
После включения операторов import и @ViewChild в home.ts (и удаления импорта из app.module.ts) я получаю: Ошибки синтаксического анализа шаблона: невозможно привязать к параметрам, поскольку это не известное свойство ion -слайды '. 1. Если 'ion-slides' является компонентом Angular и для него есть вход 'options', убедитесь, что он является частью этого модуля. 2. Если «ion-slides» является веб-компонентом, добавьте «CUSTOM_ELEMENTS_SCHEMA» в «@ NgModule.schemas» этого компонента, чтобы подавить это сообщение. 3. Чтобы разрешить любое свойство, добавьте «NO_ERRORS_SCHEMA» в «@ NgModule.schemas» этого компонента. - person JoseRM; 03.10.2018
comment
Это сработало. В строке home.html ‹ion-slides pager autoplay = true pager = true [options] = extraOptions * ngIf = base64Image.length› 0 ›[options] должны быть options. - person JoseRM; 06.10.2018