Многоразовые компоненты в Ionic 6 Angular tabs-starter

Существует несколько хороших руководств по созданию повторно используемых компонентов в 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 для получения дополнительной информации.

Будем рады услышать ваши решения в комментариях!

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *