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

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

制造按钮.组件.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>

制造按钮.组件.css

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

制造按钮组件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();
  }
}

在模态页面中，我使用这个组件，如下所示：

模式列表.页面.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>

列出模式模块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 {}

我对页面使用了相同的过程，这很有效。但是当我在模态中使用时，我得到了以下错误：
错误代码：7626 Error错误代码：未被抓住的（承诺中的）：错误：类型FabbuttonComponent是2个模块声明的一部分：ListmodalPageModule和RecipesPageModule！请考虑将FabbuttonComponent移动到导入ListmodalPageModule和RecipesPageModule的更高模块。您还可以创建一个导出并包含FabbuttonComponent的新NgModule，然后在ListmodalPageModule和RecipesPageModule中导入该NgModule。
错误：类型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/@mohamed_larbi.chouaiar/how-to-build-your-angular-components-and-use-it-everywhere-72dea7ecc0d6
为什么我可以在我的页面中使用Fabbutton组件，而不能在模态页面中使用？
如何在模态页面中使用Fabbutton组件？

好吧，如果我理解正确的话，问题是你试图在多个模块中使用一个组件（在ionic中每个页面都是一个模块）。
您必须创建一个模块来导出您必须使用的组件。

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

Check this

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

1条答案

相关问题

热门标签

最新问答