如何在ModalPage Ionic 6/电容器中使用自定义组件

Question

我在一个自定义组件中有一个浮动按钮，所以我可以在几个页面中重用这个组件。当我把这个组件注入到一个页面中时，它就起作用了。但是当我在模态中使用这个组件时，我会得到一个错误。这是我的浮动按钮代码。

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

.fixed {
position: fixed;
bottom: 85px;
right: 0;
}

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();
}
}

在模式页面中，我使用这样的组件：

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

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

我用同样的程序处理页面和作品。但是当我在模态中使用它时，我会得到以下错误：

core.mjs:7626错误错误：未捕获(在promise中(：错误：类型FabbuttonComponent是两个模块声明的一部分：ListmodalPageModule和RecipesPageModule！请考虑搬家FabbuttonComponent到导入ListmodalPageModule的更高模块和RecipesPageModule。您还可以创建一个新的NgModule来导出并包含FabbuttonComponent，然后将该NgModule导入ListmodalPageModule和RecipesPageModule。

错误：类型FabbuttonComponent是2的声明的一部分模块：ListmodalPageModule和RecipesPageModule！请考虑将FabbuttonComponent移动到导入的更高模块ListmodalPageModule和RecipesPageModule。您还可以创建一个导出并包含FabbuttonComponent的NgModule，然后导入ListmodalPageModule和RecipesPageModule中的NgModule。

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)

我尝试了以下链接来修复我的错误：

https://levelup.gitconnected.com/how-to-create-a-reusable-modal-dialog-component-in-angular-8-241cc738d260

https://medium.com/@穆罕默德·拉比·乔亚尔(Mohammed_larbi-chouaiar/how-to-build-your-and-angular components-and-use-it-everywhere-72dea7ecc0d6 (

为什么我可以在页面中使用Fabbutton组件，但不能在模式页面中使用？

如何在模式页面中使用Fabbutton组件？

Answer 1

好的，如果我理解正确的话，问题是你试图在多个模块中使用一个组件(在ionic中，每个页面都是一个模块(。Angular不允许您直接这样做。

您必须创建一个模块来导出您必须使用的组件。

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

现在，将该模块导入到需要组件的位置。

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

检查此