Ionic 6 tab-starter의 재사용 가능한 구성 요소

Ionic 6에서 재사용 가능한 구성 요소를 만드는 데 유용한 몇 가지 자습서가 있습니다. Create Reusable Progress Bar Component . 이러한 자습서는 제공된 일부starter options of Ionic(공백, 사이드 메뉴 등)에서 작동하는 것처럼 보이지만 tabs-starter에서는 실패합니다.

동료 개발자와 오류 메시지를 공유하기 위해 새로운 데모 저장소를 설정하는 동안 이상한 점을 발견했습니다.

여러 탭에서 재사용된 구성 요소가 이미 있습니다.

<app-explore-container name="Tab 1 page"></app-explore-container>

<app-explore-container name="Tab 2 page"></app-explore-container>

그리고 가장 이상한 점은 모든 탭 페이지에서 작동한다는 것입니다!

알고 보니... Ionic 앱에서 초기에 이 예제 구성 요소를 삭제하고 완전히 잊어버렸습니다. 🤦



source code of the 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 {}

Source code

마지막으로 모듈(구성 요소 대신)을 사용하려는 모든 탭 모듈로 가져와야 합니다.

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

Source code

ionic-cli를 통해 모듈 생성이 어떻게 올바르게 수행되는지 아직 확실하지 않습니다. ionic generate과 같아야 합니다.
ionic generate module explore-container/explore-container
예를 들어 참조하십시오. 자세한 내용은 stackoverflow에 대한 토론"Create component & add it to a specific module with Angular-CLI"을 참조하십시오.

의견에서 귀하의 솔루션을 듣게되어 기쁩니다!