[技術支援-2] 讓IDE支援Angular Language Service

語法自動補完

自動完成可以通過在輸入時提供可能要填入的值讓我們選擇,以加速開發的速度,如下圖:

錯誤檢查

可以檢查像是模版變數是否在元件內有對應的變數供綁定

跳轉到模版變數或方法所指向的程式碼位置

單擊並按下F12進入相對應的變數位置

可使用Angular Language Service的IDE

Visual Studio Code

1. 直接在VSCode的擴充功能裡下載Angular language service

2. 自行使用VSIX安裝
打開VSCode,先安裝.VSIX

下載附加元件:直接按此下載 /
原始專案位置:vscode-ng-language-service
下載之後,按下command+shift+P來打開指令列,並輸入


然後選擇剛剛所下載的檔案,Reload。

接著你的VSCode就可以支援Angular Language Service了!

WebStorm

package.json加上

然後執行

Sublime Text

在專案下執行下面兩個指令:

參考資料

[技術支援-1] 支援多語系

Angular i18n可做到的事

  • 以本地格式顯示日期,數量,百分比和貨幣。
  • 在組件模板中翻譯文字。
  • 翻譯單數和複數
  • 翻譯HTML屬性的替代文字

可以透過CLI來產生XLS檔案,並透過XLS檔案來設定多語系字串,接著使用下面的字串來產生網站檔案:

假如是使用JIT的方式去佈暑網站,則也要在頁面設定LOCALE_ID的值如下:

從上面的範例可以看出,Angular多語系的實作方式是讓每個語言獨立一個 index.html 版本。這樣優點是網站瀏覽較為快速,缺點則是修改時要重新REBULE的工程較大。

此連結有Angular所有支援的語系:Angular repository
在angular5的地區設定是使用BCP47,這個規格隨著時間而有些微改變如下:

LOCALE NAME OLD LOCALE ID NEW LOCALE ID
Indonesian in id
Hebrew iw he
Romanian Moldova mo ro-MD
Norwegian Bokmål no, no-NO nb
Serbian Latin sh sr-Latn
Filipino tl fil
Portuguese Brazil pt-BR pt
Chinese Simplified zh-cn, zh-Hans-CN zh-Hans
Chinese Traditional zh-tw, zh-Hant-TW zh-Hant
Chinese Traditional Hong Kong zh-hk zh-Hant-HK

以本地格式顯示日期,數量,百分比和貨幣

預設所有管道如DatePipeCurrencyPipeDecimalPipe 和PercentPipe所使用語言環境的數據格式都是en-US,如果要設置為其他語言環境,則需要導入該新語言環境的語言環境數據。

利用CLI的--locale會自動為我們設置這部份,若要手動設置方法如下:

template內的多語系支援

在angular內,設定多語系檔案的順序如下:

  • 開發於template先使用預設的語言做開發,如:
  • 增加i18n的標記,如:
  • 利用CLI產生messages.xlf,如下:
  • 將完成的翻譯文件合併到應用程式中:

為了使翻議者能夠更準確的翻議,可以在i18n的指令裡面增加上下文說明,如:

如果相同的文字需要有不同的翻議,則可增加meaning的設定。其格式為meaning|description,如:

若有相同翻議字串但meaning不同,則會有不同的翻譯。若翻議字串相同,description不同,則依然是相同的翻議。
除了使用meaning以外,也可以自己定義一個翻議字串的ID來使用,如:

假如兩個翻議字串不同卻取了相同的ID,會造成翻譯後有著相同的字串:

翻譯檔案內容如下:

則生成的HTML內容如下:

如果有時候只是想要翻譯文字而不想使用任何HTML TAG,則可以使用ng-container

翻譯HTML屬性的替代文字

假如有一個像下面的圖片有著純文字的替代文字

可以使用這樣的tag來做i18n的設定

這種技術適用於任何元素的任何屬性。
使用i18n-x="<meaning>|<description>@@" 語法來指定含義,說明和標識。

翻譯單數和複數

在一些語言的狀況下,不同的數量使用的詞彙不一樣,例如時間,可以顯示”just now”, “one minute ago”或”x minutes ago”
這時候可以用這樣的方式來設定翻譯文字

上面第一個參數minutes是最重要的,用來設定這個字串要放入的變數
第二個參數plural為翻譯類型(請參見:ICU Message Format
第三個參數則是設定各種數字要顯示的文字
第三個參數可設定的選項有下面這些:

  • =0 (or any other number)
  • zero
  • one
  • two
  • few
  • many
  • other

也可以根據要顯示的變數內容來顯示不同的翻譯字串

利用ng xi18n來產生翻譯原檔

使用CLI打入可產生messages.xlf的翻譯原檔,預設是產生xlf檔案

如果想要產出其他類型檔案可以加上--i18nFormat的參數如下:

接著把messages.xlf改名為messages.fr.xlf(假使要翻譯的目標語言為fr)
下面為一個產出的xlf檔案內容的範例:

target裡面要填的就是目標翻譯語言要顯示的文字

合併翻譯檔案回應用程式裡

使用AOT的方式

使用下面三個參數:

  • --i18nFile: 翻譯檔案的位置
  • --i18nFormat: 翻譯檔案的格式
  • --locale: 被翻譯的語系名稱

使用JIT的方式

src/main.ts裡設定所使用的語系

src/app/app.module.ts裡加上LOCALE_ID

參考資料

[功能介紹-15] Router進階介紹

設定Router Module

若我們的Router設定較為複雜時,可將Router配置為一個Router Module。

首先,設定一個路由模組app-routing.module.ts

接著,更新app.module.ts文件

多層的Router Module

我們在做網站時,會希望每個模組專注在自己的功能上,Router也不例外。因此像英雄列表的元件,如果希望點選列表內容,可以進入該英雄詳細資料的頁面如下:

首先,創建一個pre-routing檔案heroes.module.ts

新增一個heroes-routing.module.ts,內容如下:

將Router Module的檔案放在與其伴隨的模組在相同的文件夾中。這兩個heroes-routing.module.tsheroes.module.ts在同一個src/app/heroes文件夾中。

考慮給每個功能模組自己的路由配置文件。當功能路線很簡單時,看起來可能會過早。但是,路線趨於變得更加複雜,模式的一致性會隨著時間的推移而得到回報。

接著在heroes.module.ts裡導入HeroRoutingModule

path: 'heroes'目前定義在兩個地方:HeroesRoutingModule和AppRoutingModule。
由功能模塊提供的route由Router合併到其導入的模塊的route中。這使您可以繼續定義功能模塊路由,而無需修改主路由配置。

如果不想設定兩次相同的資料,可以把舊的Router設定移除

在應用程式裡面使用AppRoutingModule,打開src/app/app.module.ts:

這邊要注意的是模塊導入順序很重要

當所有的路由都在AppRoutingModule時,我們將通用path: '**'符號的設定放在路由/heroes的後面,這樣路由器才有機會匹配一個URL到/heroes路由,而不會先被AppRoutingModule的這個設定匹配走。

如果Routing在兩個不同的模組內,也是要先載入HeroesModule再載入AppRoutingModule,這樣才會使用HeroesModule裡的路由設定而不會因為在AppRoutingModule找到匹配的通用符號而顯示PageNotFoundComponent。
如果將import的順序倒過來,則會顯示PageNotFoundComponent的頁面。

在程式裡去操控路由器

使用this.router.navigate來在程式內操作路由工作

若需要傳一個參數,則可以用

要傳送兩個參數則如下

點下後出現的連結如下

這個叫做Matrix URL,在URL查詢字符串中,用分號隔開“;” 不同的參數,而不是用&

取得Router的參數

添加換頁效果

首先要載入BrowserAnimationsModule這個動態效果模組。

animations.ts在根src/app/文件夾中創建一個文件。內容如下所示:

然後在src/app/heroes/hero-detail.component.ts增加使用這個動態效果的綁定

Child routing component

子路由元件與直接使用參數去定義路由,Router預設的狀況下,若瀏覽器重新導航到相同的元件時,會重新使用該元件既有的實體,而不會重新創建。因此在物件被重用的狀況下,該元件的ngOnInit只會被呼叫一次,即使是要顯示不同的內容資料。
但是被創建的元件實體會在離開頁面時被銷毀並取消註冊,因此在前面範例的heroes-routing.module.ts檔案中裡,所使用的導航設定方式,由於在瀏覽HeroDetailComponent之後,一定要先回到HeroListComponent,才能進入下一個Detail頁面。

這會造成因為在回到HeroListComponent時已把HeroDetailComponent刪除掉了,再選擇另一個英雄要查看細節時,又會再創立一個新的HeroDetailComponent。因此每次選擇不同的英雄時,組件都會重新創建

如果想要保留頁面的狀態,就可以改使用子路由的方式來定義

下面是使用子路由的範例:

因為CrisisDetailComponentCrisisCenterHomeComponent都是CrisisListComponent的子組件,因此在不同的子組件內的狀態得以被保存,直到頁面切換離開CrisisCenterComponent時才會將元件實體刪除,這可以讓我們在瀏覽不同CrisisDetail時,得以使用到Router預設的重用設定。

使用相對路徑

./ 是在目前的位置。
../ 在上一層的位置。
下面為使用範例

網址認證功能

很多時候某些頁面或許需要登入才可以檢視,有些要登入後具備某些身份才可以開啟該網址,這時候就可以用到Router的CanActivate功能。

下面是src/app/auth-guard.service.ts的內容:

下面是src/app/admin/admin-routing.module.ts的內容

本篇所有範例可見:live demo / download example.

參考資料