Question

我在新组件中使用了离子载玻片。

carousel.component.html

<iframe src="https://twitter.com/i/videos/1087651084305281025"></iframe>

carousel.component.ts

<ion-slides pager="true" >
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
</ion-slides>

但是当我在Ionic页面中使用此组件import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-carousel', templateUrl: './carousel.component.html', styleUrls: ['./carousel.component.scss'] }) export class CarouselComponent implements OnInit { constructor() { } ngOnInit() { } }时，出现以下错误：

<app-carousel></app-carousel>

请帮助我解决此问题。

Answer 1

您需要将CUSTOM_ELEMENTS_SCHEMA添加到schemas中的NgModule。

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

...

@NgModule({
  imports: [],
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class YourModule {}

Answer 2

将IonicModule.forRoot()添加到组件的父模块有助于解决该问题。

@NgModule({
  imports: [
    ...
    IonicModule.forRoot(),
  ]
})

Answer 3

尝试在您的模块文件中添加CUSTOM_ELEMENTS_SCHEMA。

import { NgModule, CUSTOM_ELEMENTS_SCHEMA }  from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [BrowserModule],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

Answer 4

此错误已解决，将CUSTOM_ELEMENTS_SCHEMA添加到组件所在的components.module.ts上，例如“幻灯片”，而不是src / app / app.module.ts上的app.module.ts上，它解决了该错误为我。

我的结构是： -src / app / pages / welcome / welcome.page.html 我在src / app / components / slides上有模块“ slides” 组件模块收集在： -src / app / pages / components / components.module.ts 您的行为更新如下：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
...
@NgModule({
  declarations: [SlidesComponent],
  exports: [ SlidesComponent],
  ...
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
})

最后，我们需要更新src / app / pages / welcome / welcome.module.ts，例如：

@NgModule({
  imports: [
    ...
    ComponentsModule,
  ],
  declarations: [WelcomePage],
})

所有更新都必须正常工作。

Answer 5

将IonicModule.forRoot()添加到父模块（app.module.ts）中，然后将IonicModule添加到模块中，该模块用于放置离子滑动的组件

app.module.ts：

@NgModule({
  imports: [
    ...
    IonicModule.forRoot(),
  ]
})

您的组件模块（或shared.module.ts）：

@NgModule({
  imports: [
    ...
    IonicModule,
  ]
})

源自https://github.com/ionic-team/ionic/issues/17232

离子4：“离子滑动”不是已知元素

5 个答案: