Kite的筆記
0%

Ionic 系列 - (4) 自定義公用模塊

發表於 更新於 分類於
3.2k 6 分鐘

1. 自定義公用模塊

ionic4.x中頁面是模塊(module)組成的，多個模塊沒法用共一個組件(component)。

可以把component 封裝成module,讓module引入module。

以下來做實驗

新增module

1
ionic g module module/slide

新增componet

1
ionic g component module/slide

1.1. 調整module內容

crm\src\app\module\slide\slide.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SlideComponent } from './slide.component';//加入


@NgModule({
  declarations: [SlideComponent],//加入
  imports: [
    CommonModule
  ],
  exports:[
    SlideComponent
  ]//加入
})
export class SlideModule { }

1.2. 調整tab1.module.ts

crm\src\app\tab1\tab1.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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';
import { SlideModule } from '../module/slide/slide.module';//加入

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ExploreContainerComponentModule,
    Tab1PageRoutingModule,
    SlideModule//加入
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}

1.3. 調整tab.page.html

crm\src\app\tab1\tab1.page.html

加入app-slide，就成功囉。至於怎麼定義這個名稱可以去crm\src\app\module\slide\slide.component.ts調整

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
    </ion-toolbar>
  </ion-header>
  <app-slide></app-slide>
  <!-- <app-explore-container name="Tab 1 page"></app-explore-container> -->
</ion-content>

image-20211025021854454

2. 公用模塊如何使用ionic本身的component？

比方說<ion-item>等等的component用在自建的component如何做，實驗如下

crm\src\app\module\slide\slide.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { IonicModule } from '@ionic/angular';//加入
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SlideComponent } from './slide.component';


@NgModule({
  declarations: [SlideComponent],
  imports: [
    CommonModule,
    IonicModule//加入
  ],
  exports:[
    SlideComponent
  ]
})
export class SlideModule { }

crm\src\app\module\slide\slide.component.html

1
2
3
4
5
6
7
8
9
10
11
<p>
  slide works!
</p>
<ion-list>
  <ion-item>
    <ion-label>Awesome Label</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Awesome Label</ion-label>
  </ion-item>
</ion-list>

image-20211025025042015

3. 學習資源

Ionic4 Ionic5视频教程_Ionic4.x Ionic5.x入门实战教程