ionic4-工程配置

ionic4-工程配置

环境

node 10.15.0
ionic 4.12.0
cordova 9.0
# platforms
cordova-android：8.0.0
cordova-ios: 5.0.0

欢迎访问我的专栏：
ionic4 混合开发实战-csdn
ionic4 混合开发实战-简书

加载过程

相关文件

.
├── app-routing.module.ts # 路由
├── app.component.html    # 页面
├── app.component.spec.ts # 测试
├── app.component.ts      # 代码
├── app.module.ts         # module
index.html
main.ts

第一步

index.html

引入AppComponent

<app-root></app-root>

main.ts
加载AppModule

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

第二步

app.component.html
引入ion-router-outlet，用于加载其他页面

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

第三步

app-routing.module.ts
路由配置
此处定义了默认路由(懒加载方式)
值得一提的是：ionic在创建pages时，会自动在app.routing中添加路由配置。

const routes: Routes = [
  {path: '', redirectTo: '/index', pathMatch: 'full'},
  {path: 'index', loadChildren: './pages/index/index.module#IndexPageModule'}
];

app配置(app.module)

首先看一下代码

@NgModule({
  // 声明AppComponent
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    // 声明ngx-logger配置(可忽略)
    LoggerModule.forRoot({
      level: NgxLoggerLevel.DEBUG,
      serverLogLevel: NgxLoggerLevel.DEBUG
    }),
    // IonicModule:其中包含ionic的组件等
    IonicModule.forRoot(),
    // IonicStorage(插件)
    IonicStorageModule.forRoot(),
    // 路由
    AppRoutingModule,
    // 网络请求
    HttpClientModule
  ],
  // 提供的服务 (插件部分必须在此引入)
  providers: [
    StatusBar,
    SplashScreen,
    Camera,
    ImagePicker,
    FileTransfer,
    WebView,
    {provide: ErrorHandler, useClass: GlobalErrorHandler},
    {provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
    {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}
  ],
  bootstrap: [AppComponent]
})
# 可先忽略
export class AppModule {
  static injector: Injector;
  constructor(private injector: Injector) {
    AppModule.injector = injector;
  }
}

路由配置(app-routing)

const routes: Routes = [
  {path: '', redirectTo: '/index', pathMatch: 'full'},
  {path: 'index', loadChildren: './pages/index/index.module#IndexPageModule'}
];

@NgModule({
  providers: [SelectivePreLoading],
  imports: [
    RouterModule.forRoot(routes, {preloadingStrategy: SelectivePreLoading, useHash: true})
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

RouterModule.forRoot(routes, {preloadingStrategy: SelectivePreLoading, useHash: true})

查看定义，具体支持哪些配置

ExtraOptions

export interface ExtraOptions {
    // 路由追踪 用于调试
    enableTracing?: boolean;
   // hash方式路由(如：#/index)
    useHash?: boolean;
    initialNavigation?: InitialNavigation;
    errorHandler?: ErrorHandler;
    // 预加载路由策略
    preloadingStrategy?: any;
    onSameUrlNavigation?: 'reload' | 'ignore';
    scrollPositionRestoration?: 'disabled' | 'enabled' | 'top';
    anchorScrolling?: 'disabled' | 'enabled';
    scrollOffset?: [number, number] | (() => [number, number]);
    paramsInheritanceStrategy?: 'emptyOnly' | 'always';
    malformedUriErrorHandler?: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree;
    relativeLinkResolution?: 'legacy' | 'corrected';
}

此处配置了路由预加载策略。
什么事路由预加载?
场景：
在A页面，点击按钮跳转B页面，此时如果我们在A页面就预先将B页面加载，即可提升一定的用户体验。

下一篇将详细介绍路由预加载策略。

欢迎访问我的专栏：
ionic4 混合开发实战-csdn
ionic4 混合开发实战-简书