代码之家 › 专栏 › 技术社区 › Varun Sukheja

离子4:“离子载玻片”不是已知元素

ionic4 ionic-framework angular

Varun Sukheja · 技术社区 · 7 年前

我在一个新组件中使用离子幻灯片。

carousel.component.html

<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>

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> 在我的爱奥尼亚页面中,我得到了以下错误:

'ion-slide' is not a known element:
1. If 'ion-slide' is an Angular component, then verify that it is part of this module.
2. If 'ion-slide' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<ion-slides pager="true" >
  [ERROR ->]<ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
"): ng:///SharedModule/CarouselComponent.html@1:2
'ion-slide' is not a known element:
1. If 'ion-slide' is an Angular component, then verify that it is part of this module.
2. If 'ion-slide' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    <h1>Slide 1</h1>
  </ion-slide>
  [ERROR ->]<ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>

3 回复 | 直到 7 年前

Druta Ruslan 7 年前

你需要添加 CUSTOM_ELEMENTS_SCHEMA 到 schemas 在里面 NgModule

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

...

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

export class YourModule {}

Varun Sukheja 7 年前

添加 IonicModule.forRoot() 我的组件的父模块帮助解决了这个问题。

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

Imran Malik Aryan 6 年前

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 { }

Developsonora tecnologa e Inno 6 年前

通过在上添加自定义的“元素”架构,可以解决此错误组件.module.ts例如“幻灯片”,而不是“幻灯片”应用程序模块.ts在src/app上/应用程序模块.ts,它为我解决了这个问题。

我的结构是: -src/app/pages/欢迎/欢迎使用.page.html 我在src/app/components/slides上有“slides”模块 -src/app/pages/组件/组件.module.ts

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

为了完成,我们需要更新src/app/pages/welcome/欢迎光临.module.ts比如:

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

-1

mvermand 7 年前

添加 IonicModule.forRoot() 父模块( app.module.ts )再加上 IonicModule 把你的组件固定在离子滑道上

应用程序模块.ts:

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

组件模块(或 shared.module.ts

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

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