簡述

AppComponent是系統內的 根組件，
通常會建議寫部分服務的初始設定。

功能

開發過程中大概遇到幾種設定如下：

• 多語系初始設定
• icon讀取圖片
• 登入初始流程

檔案結構

-src
  |-app
    |-app.component.css
    |-app.component.html
    |-app.component.ts
    |-app.module.ts

實作

(一) 多語系初始設定

config.ts：

首先在 config 資料夾底下新增config.ts。
假設系統內需要三種語系，分別幫語系命名縮寫跟全寫。
以及設定一個變數TOGGLELANG，來開關是否需要開啟多語系。

export const LANG = [
  { long: "Chinese", short: "cn" },
  { long: "Traditional", short: "tw" },
  { long: "English", short: "en" }
];
export const TOGGLELANG = true;
export const PAGESIZE = 10;
export const PAGESIZEOPTIONS = [5, 10, 25, 100];
export const COPYRIGHT = "COPYRIGHT XXX 2019";
export const LOGOURL = "assets/img/logo.svg";
export const ApiUrl = "http://localhost:3000";

config.ts 裡的PAGESIZE、PAGESIZEOPTIONS
是之後列表下方的頁數設定，後續會提及。

通常網站上最下方會印有版權，
以及站上上方會有logo或是後台名稱，
都建議寫在常數檔 config.ts 裡面。

--

i18n：

在assets/i18n資料夾底下新增語系Json檔。

檔案結構

-src
  |-app
  |-assets
      |-css
      |-img
      |-i18n
          |-cn.json
          |-en.json
          |-tw.json

Json檔內容請參照下方#範例網。

--

在根模塊(AppM)以及共享模塊(SharedM)裡設定：

app.module.ts

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

@NgModule({
  ...
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    }),
    ...
  ],
  ...
})

shared.module.ts

@NgModule({
  imports: [
    TranslateModule,
    ...
  ],
  exports: [
    TranslateModule,
    ...
  ],
  ...
})
export class SharedModule {}

--

在AppComponent裡設定語言初始值：

export class AppComponent implements OnInit {
  constructor(
    private translate: TranslateService,
    ...
  ) {
    let arr = LANG.map(item => {
      return item.short;
    });
    translate.addLangs(arr);
    //語系預設值,之後會寫在storage
    let lang = 'tw';
    translate.setDefaultLang(lang);
    translate.use(lang);
  }

一開始要先告知TranslateService，有哪三種語系 ['cn','en','tw']，
它才能去 i18n資料夾 底下找相對應的json檔。

(二) icon讀取圖片

為了方便維護icons管理，會做幾件事情來統一放置。

檔案結構

在assets資料夾底下創建 icon資料夾。

-src
  |-app
      |-config
            ...
            |-icons.ts
  |-assets
      ...
      |-icon
          |-admin.svg
          |-alert.svg
          ...

把系統會用到的所有icon集中在這裡。

內容請參照下方#範例網。

--

icons.ts

寫icons.ts來對應icon資料夾圖片。

export const ICONS = [
  { tab: "user", path: "assets/icon/user.svg" },
  { tab: "index", path: "assets/icon/index.svg" },
  { tab: "admin", path: "assets/icon/admin.svg" },
  { tab: "customer", path: "assets/icon/customer.svg" },
 ...
];

--

app.component.ts：

export class AppComponent implements OnInit {
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer,
    ...
  ) {
    ICONS.forEach(val => {
      this.matIconRegistry.addSvgIcon(
        val.tab,
        this.domSanitizer.bypassSecurityTrustResourceUrl(val.path)
      );
    });
    ...
  }

之後需要使用的地方

<mat-icon svgIcon="customer"></mat-icon>

--

其他說明：

設定路由

在AppRoutingModule裡先設定根路由，
後續很多功能模塊都會用延遲子路由的方式。

但為了效能問題會希望等到達了某頁，
才把那頁相關的需求跟後端要，而不是一開始先載好。

import { NgModule } from "@angular/core";
import { RouterModule, Routes, PreloadAllModules } from "@angular/router";

const appRoutes: Routes = [];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, {
      preloadingStrategy: PreloadAllModules
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

有關於preloadingStrategy，
可參考 https://blog.kevinyang.net/2017/01/21/angular2-preloading/

--

樣式：

<!-- app.component.html -->
<app-spinner></app-spinner>
<router-outlet></router-outlet>

/* app.component.css */
:host ::ng-deep router-outlet + * {
  display: flex;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

:host {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

範例碼

https://stackblitz.com/edit/ngcms-appcomp