Существует несколько хороших руководств по созданию повторно используемых компонентов в Ionic 6, например, Create Reusable Progress Bar Component. В то время как эти руководства, похоже, работают в некоторых из предоставленных стартовых опций Ionic (blank, sidemenu и т.д.), они не работают в tabs-starter.
Пока я создавал свежий демо-репозиторий, чтобы поделиться своим сообщением об ошибке с коллегами-разработчиками, я заметил кое-что странное:
Уже существовал компонент, который повторно использовался на нескольких вкладках:
<app-explore-container name="Tab 1 page"></app-explore-container>
<app-explore-container name="Tab 2 page"></app-explore-container>
И — что самое странное — он работал на всех страницах вкладок!
Оказывается… Я удалил этот пример компонента в самом начале работы над моим приложением Ionic и совершенно забыл о нем. ?
Исследовав исходный код tabs-starter, я узнал следующее:
Сначала вам нужно определить модуль для вашего компонента!
/* explore-container.module.ts */
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ExploreContainerComponent } from './explore-container.component';
@NgModule({
imports: [ CommonModule, FormsModule, IonicModule],
declarations: [ExploreContainerComponent],
exports: [ExploreContainerComponent]
})
export class ExploreContainerComponentModule {}
Исходный код
И, наконец, модуль (а не компонент) должен быть импортирован в каждый модуль вкладки, где мы хотим его использовать:
/* tab1.module.ts */
import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab1Page } from './tab1.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
import { Tab1PageRoutingModule } from './tab1-routing.module';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
ExploreContainerComponentModule,
Tab1PageRoutingModule
],
declarations: [Tab1Page]
})
export class Tab1PageModule {}
Исходный код
Я пока не совсем понимаю, как правильно происходит создание модуля через ionic-cli, это должно быть что-то вроде того, что происходит с ionic generate:
ionic generate module explore-container/explore-container
Смотрите, например, обсуждение «Create component & add it to a specific module with Angular-CLI» на stackoverflow для получения дополнительной информации.
Будем рады услышать ваши решения в комментариях!