Ionic3，組件的使用（四）

說明

　　因為同樣是作為 Ionic3 小白，所以很多東西都是自己摸索出來的，可能有很多不合理的地方，請多多指正。

 

效果圖

 

細節說明

　　一：組件、頁面均采用 懶加載；

　　二：頁面的頭部標題欄，采用了組件化的方式，用來提高代碼的公用率；

　　三：頁面布局采用的是 ion-grid、ion-list（會做一個總結）；

　　四：通過使用了一些 angularjs 語法，ngFor、ngStyle、通過import Events 實現數據的回調、ngZone進行頁面的重構、數據的雙向綁定、@inpput（）、@ViewChild（）

 

創建組件

　　執行命令：ionic g component 組件名稱

　　　　命令執行完成后，如圖生成三個文件（其中.module.ts文件是我自己加的，用來實現懶加載），第一次創建還會有一個componen.module.ts文件。

　　

 

 

　　　　組件調用時的名稱，在 app-header.ts 文件中進行規定：selector 規定了調用時，元素的名稱<app-header></app-header>

　　　　

 

 

　　　　組建中關於 app-header.module.ts 懶加載的聲明：

import { NgModule } from "../../../node_modules/@angular/core";
import { AppHeaderComponent } from "./app-header";
import { IonicPageModule } from "../../../node_modules/ionic-angular";

@NgModule({
    declarations:[
        AppHeaderComponent
    ],
    imports:[
        IonicPageModule.forChild(AppHeaderComponent)
    ]
})
export class AppHeaderComponentModule{

}

 

　　　　關於 components.module.ts 文件中的聲明：

import { NgModule } from '@angular/core';
import { AppHeaderComponent } from './app-header/app-header';
import { CommonModule } from '../../node_modules/@angular/common';
import { IonicModule } from '../../node_modules/ionic-angular';

@NgModule({
    declarations: [AppHeaderComponent],
    imports: [
        CommonModule,
        IonicModule
    ],
    exports: [AppHeaderComponent]
})
export class ComponentsModule {}

 

　　　　在相關頁面 .ts 文件中導入插件：（我這里是在 finder.html 頁面中進行的引用）

import { IonicPageModule } from 'ionic-angular';
import { FinderPage } from './finder';
import { NgModule } from "@angular/core";
import { ComponentsModule } from '../../../components/components.module';

@NgModule({
    declarations:[
        FinderPage
    ],
    imports:[
        IonicPageModule.forChild(FinderPage),
        ComponentsModule
    ]
})

export class FinderPageModule{

}

 

　　　　在相關的頁面中引用插件：其中關於 search-show、title屬性的定義意義會作另講，詳細說明。