Angular ion幻灯片问题错误:未捕获(承诺中):错误:模板分析错误:
我昨天刚开始学习ionic5,我参考了这个网站 创建应用程序幻灯片时发生错误 从控制台选项卡的开发人员工具浏览器中捕获错误Angular ion幻灯片问题错误:未捕获(承诺中):错误:模板分析错误:,angular,ionic-framework,Angular,Ionic Framework,我昨天刚开始学习ionic5,我参考了这个网站 创建应用程序幻灯片时发生错误 从控制台选项卡的开发人员工具浏览器中捕获错误 ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'ion-slides'. 1. If 'ion-slides' is an Angular component and i
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'ion-slides'.
1. If 'ion-slides' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'ion-slides' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<ion-slides pager="true" [ERROR ->][options]="slideOpts">
<ion-slide>
<h1>Slide 1</h1>
"): ng:///ComponentsModule/SlidesComponent.html@0:25
'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" [options]="slideOpts">
[ERROR ->]<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
"): ng:///ComponentsModule/SlidesComponent.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>
"): ng:///ComponentsModule/SlidesComponent.html@4: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 2</h1>
</ion-slide>
[ERROR ->]<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
"): ng:///ComponentsModule/SlidesComponent.html@7:2
'ion-slides' is not a known element:
1. If 'ion-slides' is an Angular component, then verify that it is part of this module.
2. If 'ion-slides' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ion-slides pager="true" [options]="slideOpts">
<ion-slide>
<h1>Slide 1</h1>
"): ng:///ComponentsModule/SlidesComponent.html@0:0
Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'ion-slides'.
1. If 'ion-slides' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'ion-slides' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<ion-slides pager="true" [ERROR ->][options]="slideOpts">
<ion-slide>
<h1>Slide 1</h1>
"): ng:///ComponentsModule/SlidesComponent.html@0:25
'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" [options]="slideOpts">
[ERROR ->]<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
"): ng:///ComponentsModule/SlidesComponent.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>
"): ng:///ComponentsModule/SlidesComponent.html@4: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 2</h1>
</ion-slide>
[ERROR ->]<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
"): ng:///ComponentsModule/SlidesComponent.html@7:2
'ion-slides' is not a known element:
1. If 'ion-slides' is an Angular component, then verify that it is part of this module.
2. If 'ion-slides' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ion-slides pager="true" [options]="slideOpts">
<ion-slide>
<h1>Slide 1</h1>
"): ng:///ComponentsModule/SlidesComponent.html@0:0
at syntaxError (compiler.js:2175)
at TemplateParser.parse (compiler.js:11188)
at JitCompiler._parseTemplate (compiler.js:25721)
at JitCompiler._compileTemplate (compiler.js:25709)
at compiler.js:25653
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:25653)
at compiler.js:25566
at Object.then (compiler.js:2166)
at JitCompiler._compileModuleAndComponents (compiler.js:25565)
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:34182)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)
关于components.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SlidesComponent } from './slides/slides.component';
import { StartComponent } from './start/start.component';
import { LogoComponent } from './logo/logo.component';
@NgModule({
declarations: [SlidesComponent, StartComponent, LogoComponent],
exports: [SlidesComponent, StartComponent, LogoComponent],
imports: [
CommonModule
]
})
export class ComponentsModule { }
在slides.component.html上
<ion-slides pager="true" [options]="slideOpts">
<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>
幻灯片1
幻灯片2
幻灯片3
应该显示的结果是带有幻灯片功能的页面,但不是,结果只显示为白色空白页面,因此我检查元素并发现显示的错误您的
组件模块中缺少IonicModule
错误说明了一切。如果不导入使用其组件的模块,angular会给出该错误
只需在组件.module.ts中执行以下操作
从'@ionic/angular'导入{IonicModule};
...
@NGD模块({
声明:[SlideComponent、StartComponent、LogoComponent],
导出:[SlidesComponent、StartComponent、LogoComponent],
进口:[
公共模块,
离子模块//
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SlidesComponent } from './slides/slides.component';
import { StartComponent } from './start/start.component';
import { LogoComponent } from './logo/logo.component';
@NgModule({
declarations: [SlidesComponent, StartComponent, LogoComponent],
exports: [SlidesComponent, StartComponent, LogoComponent],
imports: [
CommonModule
]
})
export class ComponentsModule { }
<ion-slides pager="true" [options]="slideOpts">
<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>