[英]How to use a custom component in a ModalPage Ionic 6/Capacitor?
I have a floating button in a custom component so I can reuse this component in several pages.我在自定义组件中有一个浮动按钮,因此我可以在多个页面中重用该组件。 When I inject this component into a page this works.
当我将此组件注入页面时,它可以工作。 But when I use this component in a modal then I get an error.
但是当我在模态中使用这个组件时,我得到一个错误。 This is my code for my float button.
这是我的浮动按钮的代码。
Fabbutton.component.html Fabbutton.component.html
<div class="fixed">
<ion-fab (click)="scrollToTop()" vertical="bottom" horizontal="end" edge slot="fixed">
<ion-fab-button class="toolbar-color" size="small">
<ion-icon name="arrow-up"></ion-icon>
</ion-fab-button>
</ion-fab>
</div>
Fabbutton.component.css Fabbutton.component.css
.fixed {
position: fixed;
bottom: 85px;
right: 0;
}
Fabbutton.component.ts Fabbutton.component.ts
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-fabbutton',
templateUrl: './fabbutton.component.html',
styleUrls: ['./fabbutton.component.scss'],
})
export class FabbuttonComponent {
@Output('onClick') onClick = new EventEmitter<any>();
scrollToTop() {
this.onClick.emit();
}
}
In the modal page I use this component like this:在模态页面中,我像这样使用这个组件:
ListModal.page.html ListModal.page.html
<ion-header>
<ion-toolbar class="toolbar-color">
<ion-title>{{name}}</ion-title>
<ion-buttons slot="start">
<ion-button (click)="modalCtrl.dismiss()">
<ion-icon name="arrow-back-sharp" slot="icon-only"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<app-fabbutton (onClick)="scrollToTop()"></app-fabbutton>
</ion-content>
ListModal.module.ts ListModal.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ListModalPageRoutingModule } from './listmodal-routing.module';
import { ListModalPage } from './listmodal.page';
import { FabbuttonComponent } from 'src/app/components/fabbutton/fabbutton.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
ListModalPageRoutingModule
],
declarations: [ListModalPage, FabbuttonComponent]
})
export class ListModalPageModule {}
I use this same proces for the pages and this works.我对页面使用相同的过程,这很有效。 But When I use this in a Modal I get the following error:
但是当我在模态中使用它时,会出现以下错误:
core.mjs:7626 ERROR Error: Uncaught (in promise): Error: Type FabbuttonComponent is part of the declarations of 2 modules: ListmodalPageModule and RecipesPageModule.
core.mjs:7626 错误错误:未捕获(承诺中):错误:FabbuttonComponent 类型是 2 个模块声明的一部分:ListmodalPageModule 和 RecipesPageModule。 Please consider moving FabbuttonComponent to a higher module that imports ListmodalPageModule and RecipesPageModule.
请考虑将 FabbuttonComponent 移至导入 ListmodalPageModule 和 RecipesPageModule 的更高模块。 You can also create a new NgModule that exports and includes FabbuttonComponent then import that NgModule in ListmodalPageModule and RecipesPageModule.
您还可以创建一个新的 NgModule,它导出并包含 FabbuttonComponent,然后将该 NgModule 导入 ListmodalPageModule 和 RecipesPageModule。
Error: Type FabbuttonComponent is part of the declarations of 2 modules: ListmodalPageModule and RecipesPageModule.
错误:类型 FabbuttonComponent 是 2 个模块声明的一部分:ListmodalPageModule 和 RecipesPageModule。 Please consider moving FabbuttonComponent to a higher module that imports ListmodalPageModule and RecipesPageModule.
请考虑将 FabbuttonComponent 移至导入 ListmodalPageModule 和 RecipesPageModule 的更高模块。 You can also create a new NgModule that exports and includes FabbuttonComponent then import that NgModule in ListmodalPageModule and RecipesPageModule.
您还可以创建一个新的 NgModule,它导出并包含 FabbuttonComponent,然后将该 NgModule 导入 ListmodalPageModule 和 RecipesPageModule。
at verifySemanticsOfNgModuleDef (core.mjs:24393:15) at RecipesPageModule.get (core.mjs:24313:21) at getInjectorDef (core.mjs:482:13) at walkProviderTree (core.mjs:6473:18) at core.mjs:6433:13 at core.mjs:4193:76 at Array.forEach (<anonymous>) at deepForEach (core.mjs:4193:11) at core.mjs:4193:51 at Array.forEach (<anonymous>) at resolvePromise (zone.js:1262:35) at resolvePromise (zone.js:1216:21) at zone.js:1329:21 at _ZoneDelegate.invokeTask (zone.js:443:35) at Object.onInvokeTask (core.mjs:26339:33) at _ZoneDelegate.invokeTask (zone.js:442:64) at Zone.runTask (zone.js:214:51) at drainMicroTaskQueue (zone.js:632:39)
I have tried the following links to fix my error:我已尝试以下链接来修复我的错误:
https://levelup.gitconnected.com/how-to-create-a-reusable-modal-dialog-component-in-angular-8-241cc738d260 https://levelup.gitconnected.com/how-to-create-a-reusable-modal-dialog-component-in-angular-8-241cc738d260
https://medium.com/@mohamed_larbi.chouaiar/how-to-build-your-angular-components-and-use-it-everywhere-72dea7ecc0d6 https://medium.com/@mohamed_larbi.chouaiar/how-to-build-your-angular-components-and-use-it-everywhere-72dea7ecc0d6
Why can I use my Fabbutton component in my pages but not in the modal page?为什么我可以在我的页面中使用我的 Fabbutton 组件,但不能在模式页面中使用?
How can I use the Fabbutton component in my modal page?如何在我的模态页面中使用 Fabbutton 组件?
Ok, if i understand correctly, the problem is you try to use a component in multiple modules (in ionic every page is a module).好的,如果我理解正确,问题是您尝试在多个模块中使用一个组件(在 ionic 中,每个页面都是一个模块)。 Angular not allow you to do that directly.
Angular 不允许你直接这样做。
You have do create a module that export the components you have to use.您确实创建了一个模块来导出您必须使用的组件。
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FabbuttonComponent } from 'src/app/components/fabbutton/fabbutton.component';
@NgModule({
imports: [ CommonModule ],
declarations: [ FabbuttonComponent ],
exports: [ FabbuttonComponent, CommonModule, FormsModule ]
})
export class FabbuttonSharedMobule { }
Now import that module where you need the component.现在将该模块导入您需要该组件的位置。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ListModalPageRoutingModule } from './listmodal-routing.module';
import { ListModalPage } from './listmodal.page';
import { FabbuttonSharedModule } from 'src/app/common/fabbuttonshared.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
FabbuttonSharedModule,
IonicModule,
ListModalPageRoutingModule
],
declarations: [ListModalPage]
})
export class ListModalPageModule {}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.