濰坊哪里能找到做網(wǎng)站的seo廣告平臺(tái)
1 Ionic4.x 文件分析
1.1 app.module.ts 分析
Ionic 是一個(gè)基于 Angular 的移動(dòng)應(yīng)用開(kāi)發(fā)框架，能幫助開(kāi)發(fā)者使用 Web 技術(shù)（HTML5、CSS3、JavaScript）創(chuàng)建跨平臺(tái)的應(yīng)用程序。在 Ionic 應(yīng)用程序中，app.module.ts 文件是整個(gè)應(yīng)用程序的入口點(diǎn)，它定義了應(yīng)用程序的模塊和依賴(lài)項(xiàng)，并且配置了應(yīng)用程序的生命周期事件。
app.module.ts是Ionic的根模塊，告訴Ionic如何組裝應(yīng)用。根模塊用來(lái)引導(dǎo)并運(yùn)行應(yīng)用?？梢詾楦K的輸出類(lèi)取任何名稱(chēng)，默認(rèn)名稱(chēng)為AppModule。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],entryComponents: [],imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],providers: [StatusBar,SplashScreen,{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],bootstrap: [AppComponent]
})
export class AppModule {}
1.1.1 引入依賴(lài)
// Angular核心
import { NgModule } from '@angular/core';
// 瀏覽器解析的模塊
import { BrowserModule } from '@angular/platform-browser';
// 路由
import { RouteReuseStrategy } from '@angular/router';// Ionic核心模塊
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
// 啟動(dòng)畫(huà)面插件相關(guān)服務(wù)
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
// 導(dǎo)航條插件相關(guān)服務(wù)
import { StatusBar } from '@ionic-native/status-bar/ngx';// 根路由
import { AppRoutingModule } from './app-routing.module';
// 根組件
import { AppComponent } from './app.component';
1.1.2 @NgModule裝飾器
創(chuàng)建功能模塊，接收用來(lái)描述模塊屬性的元數(shù)據(jù)對(duì)象。可以將AppModule標(biāo)記為Angular模塊類(lèi)（也叫NgModule類(lèi)），告訴Angular如何編譯和啟動(dòng)應(yīng)用。
@NgModule({//...
})
export class AppModule {}
1.1.3 declarations
配置當(dāng)前項(xiàng)目運(yùn)行的組件（聲明組件）。
@NgModule({declarations: [AppComponent]
})
export class AppModule {}
1.1.4 imports
配置當(dāng)前模塊運(yùn)行依賴(lài)的其它模塊。
@NgModule({imports: [BrowserModule, //瀏覽器解析IonicModule.forRoot(), AppRoutingModule], //路由配置
})
export class AppModule {}
1.1.5 providers
配置項(xiàng)目所需要的服務(wù)。自定義的服務(wù)要在此聲明，引入的ionic-native插件也要在次聲明。
@NgModule({providers: [StatusBar, //導(dǎo)航條SplashScreen, //啟動(dòng)畫(huà)面{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy } //注冊(cè)一個(gè)路由服務(wù)],
})
export class AppModule {}
1.1.6 bootstrap
指定應(yīng)用的主視圖，通過(guò)引導(dǎo)AppModule來(lái)啟動(dòng)應(yīng)用，這里默認(rèn)寫(xiě)的是根組件。
@NgModule({bootstrap: [AppComponent]
})
export class AppModule {}
1.1.7 export
導(dǎo)出模塊。根模塊AppModule沒(méi)有其它模塊調(diào)用，所以不需要導(dǎo)出任何內(nèi)容，但必須要寫(xiě)。
export class AppModule {}
2 創(chuàng)建頁(yè)面以及頁(yè)面跳轉(zhuǎn)
- cd 到我們的項(xiàng)目目錄
C:\Users\zhaoshuai-lc\Desktop\ionic-demo\myApp>
- 通過(guò) ionic g page 頁(yè)面名稱(chēng)如下圖所示
C:\Users\zhaoshuai-lc\Desktop\ionic-demo\myApp>ionic g page button
> ng.cmd generate page button
CREATE src/app/button/button-routing.module.ts (347 bytes)
CREATE src/app/button/button.module.ts (472 bytes)
CREATE src/app/button/button.page.html (302 bytes)
CREATE src/app/button/button.page.spec.ts (452 bytes)
CREATE src/app/button/button.page.ts (256 bytes)
CREATE src/app/button/button.page.scss (0 bytes)
UPDATE src/app/app-routing.module.ts (534 bytes)
[OK] Generated page!
-
創(chuàng)建完成組件以后會(huì)在src 目錄下面多一個(gè)button 的目錄，它既是一個(gè)頁(yè)面也是一個(gè)模塊
-
如果我們想在tab1 里面寫(xiě)一個(gè)按鈕點(diǎn)擊跳轉(zhuǎn)到 button 頁(yè)面的話(huà)我們可以通過(guò)使用Angular 的路由跳轉(zhuǎn)。在ionic4.x 中路由是完全基于angular，用法幾乎和angular 一樣。
<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><ion-button color="primary" [routerLink] = "['/button']">跳轉(zhuǎn)到button頁(yè)面</ion-button><app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>- ionic4.x 中跳轉(zhuǎn)到其他頁(yè)面不會(huì)默認(rèn)加返回按鈕，如果我們想給button 頁(yè)面加返回的話(huà)需要找到button 對(duì)應(yīng)的button.page.html，然后在再頭部加入ion-back-button。
<ion-header [translucent]="true"><ion-toolbar><ion-buttons slot="start"><ion-back-button default-href="/tabs/tab1" text="back" icon="caret-back"></ion-back-button></ion-buttons><ion-title>button</ion-title></ion-toolbar>
</ion-header><ion-content [fullscreen]="true"><ion-header collapse="condense"><ion-toolbar><ion-title size="large">button</ion-title></ion-toolbar></ion-header>
</ion-content>3 Ionic4.x 新增底部tabs 頁(yè)面
- 創(chuàng)建tab4 模塊
ionic g page tab4
- 修改根目錄里app-routing.module.ts 文件里面的路由配置，去掉默認(rèn)增加的路由
- tabs.router.module.ts 中新增路由
{path: 'tab4',loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)}
- tabs.page.html 中新增底部tab 切換按鈕
<ion-tabs><ion-tab-bar slot="bottom"><ion-tab-button tab="tab1" href="/tabs/tab1"><ion-icon aria-hidden="true" name="triangle"></ion-icon><ion-label>Tab 1</ion-label></ion-tab-button><ion-tab-button tab="tab2" href="/tabs/tab2"><ion-icon aria-hidden="true" name="ellipse"></ion-icon><ion-label>Tab 2</ion-label></ion-tab-button><ion-tab-button tab="tab3" href="/tabs/tab3"><ion-icon aria-hidden="true" name="square"></ion-icon><ion-label>Tab 3</ion-label></ion-tab-button><ion-tab-button tab="tab4" href="/tabs/tab4"><ion-icon aria-hidden="true" name="settings"></ion-icon><ion-label>Tab 4</ion-label></ion-tab-button></ion-tab-bar></ion-tabs>4 Ionic4.x 中自定義公共模塊
- 創(chuàng)建公共模塊以及組件
ionic g module module/slide
ionic g component module/slide
- 公共模塊slide.module.ts 中暴露對(duì)應(yīng)的組件
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';// 1 導(dǎo)入組件
import {SlideComponent} from "./slide.component";@NgModule({// 2 聲明組件declarations: [SlideComponent],imports: [CommonModule],// 3 暴露組件exports: [SlideComponent]
})
export class SlideModule {
}- 用到的地方引入自定義模塊，并依賴(lài)注入自定義模塊
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';import { IonicModule } from '@ionic/angular';import { Tab4PageRoutingModule } from './tab4-routing.module';import { Tab4Page } from './tab4.page';// 1 引入自定義模塊
import {SlideModule} from "../module/slide/slide.module";@NgModule({imports: [CommonModule,FormsModule,IonicModule,Tab4PageRoutingModule,// 2 依賴(lài)注入自定義模塊SlideModule],declarations: [Tab4Page]
})
export class Tab4PageModule {}- 使用自定義模塊
<ion-header [translucent]="true"><ion-toolbar><ion-title>tab4</ion-title></ion-toolbar>
</ion-header><ion-content [fullscreen]="true"><ion-header collapse="condense"><ion-toolbar><ion-title size="large">tab4</ion-title></ion-toolbar></ion-header>
<!-- 使用模塊--><ion-content><app-slide></app-slide></ion-content>
</ion-content>5 Ionic4.x 自定義公共模塊中使用 ionic 內(nèi)置組件
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';import {SlideComponent} from "./slide.component";
// 1 導(dǎo)入ionic核心模塊
import {IonicModule} from "@ionic/angular";@NgModule({declarations: [SlideComponent],imports: [CommonModule,// 2 依賴(lài)注入ionic核心模塊IonicModule],exports: [SlideComponent]
})
export class SlideModule {
}<p>slide works!
</p>
<ion-button>ionic-button</ion-button>
6 page和module的區(qū)別?
在Ionic框架中，Page和Module是兩個(gè)重要的概念，它們有以下區(qū)別：
- 定義方式：Module是Angular的概念，用于聲明、配置和組裝應(yīng)用模塊。而Page是Ionic的概念，通常指的是一個(gè)單獨(dú)的頁(yè)面或視圖。
- 功能：Module主要負(fù)責(zé)組織和維護(hù)代碼，它包含組件、服務(wù)、指令等。Page則更關(guān)注的是頁(yè)面的呈現(xiàn)和用戶(hù)的交互。
- 生命周期：Module的生命周期主要依賴(lài)于Angular的依賴(lài)注入機(jī)制。而Page的生命周期則與Ionic的導(dǎo)航和路由系統(tǒng)密切相關(guān)。
- 使用場(chǎng)景：在復(fù)雜的Angular應(yīng)用中，我們會(huì)使用Module來(lái)組織代碼。而在Ionic應(yīng)用中，Page通常用于定義和管理各個(gè)頁(yè)面或視圖。
