AppComponent是系統內的 根組件,
通常會建議寫部分服務的初始設定。
開發過程中大概遇到幾種設定如下:
-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 裡面。
--
在assets/i18n
資料夾底下新增語系Json檔。
-src
|-app
|-assets
|-css
|-img
|-i18n
|-cn.json
|-en.json
|-tw.json
Json檔內容請參照下方#範例網。
--
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檔。
為了方便維護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