某工程師的開發日常

我們都知道Angular Service是Singleton Pattern，但是不幸的事... 我們有時會因為一些需求，希望能夠在多個元件中不要共用同一個Instance，而是在多個元件中使用不同的Instance。 事實上這個問題並不難，其實只需要短短幾行程式碼就可以解決，我們只要使用useClass並配合@Inject去注入Service就可以得到不同的Instance，其範例如下所示。 1. 首先，我們在providers它建立了兩個provider分別是Instance_1和Instance_2。 2. 接著在constructor使用@Inject去注入那兩個provider。 3. 最後你會發現Instance_1和Instance_2會是不同的Instance。 @Component({ selector: 'app-root', providers: [ { provide: 'Instance_1', useClass: StorageService }, { provide: 'Instance_2', useClass: StorageService } ], templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor( @Inject('Instance_1') private Instance_1: StorageService, @Inject('Instance_2') private Instance_2: StorageService) { console.log(this.Instance_1 === this.Instance_2); } }

隨著Angular 7的到來，最近也將手邊的專案都順利的升級到Angular 7，可說是無痛無雷呀~ 不過還是有些地方是需要注意，就是在Angular 7開始不予許混用Template-Driven Form和Reactive Form，所以像下面這段程式碼是不能被編譯的。 <form [formGroup]="form"> <input formControlName="Email" [(ngModel)]="value"> </form> 實際上這樣的混合的做法很糟也很難維護和測試，只會讓品質變差，所以Angular 7把這個卡掉是很正確的事(拍手)。 題外話，目前大部分的Angular 開發者也幾乎都是以Reactive Form為主來開發表單，最主要的原因是它比Template-Driven Form要來好維護和測試，特別是對於大表單與動態欄位，更是要採用Reactive Form，絕對會省下不少測試維護的時間。 可想而知Angular 7不予許混用Template-Driven Form和Reactive Form這件事，其實影響層面不大。 另外一項值得注意的事，Angular 7加入Budget Bundles的機制。簡單來說，當Bundle Size超過設定的門檻值就會觸發警告和錯誤，所以你會在angular.json看到下面這段設定。 "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ] 專案升級至Angular 7的方式: 1. 如果專案還是使用Rxjs 5，請安裝 "npm i -g rxjs-tslint"，並且執行"rxjs-...

當我們從在Reactive Form取得欄位資料之後可能還需要做一些型別轉換。 例如Select的value為"ture"時，而它的型別是string，這時我們免不了一定要做型別轉換。 幸好，在Angular有ngValue可以使用，它與value的差別在於，value總是回傳string型別，而ngValue會回傳Object型別， 所以如果我們使用ngValue，其值為"true"時，我們得到的型別會是boolean，而不是string。 現在當我們了解value和ngValue之間的差異之後，那些型別轉換的瑣事自然就不存在了! // (1) 取出的型態會是string <select class="form-control" formControlName="Sent"> <option value="true">Yes</option> <option value="false">No</option> </select> // (2) 取出的型態會是string <select class="form-control" formControlName="Sent"> <option [value]="true">Yes</option> <option [value]="false">No</option> </select> // (3) 取出的型態會是boolean <select class="form-control" formControlName="Sent"> <option [ngValue]="true">Yes</option> <option [ngValue]="false...

在幾天前，同事向我請教關於Angular Router的CanActivate和CanActivateChild的差別，所以想寫這篇文章來說明CanActivate和CanActivateChild的路由行為。 在Angular的Route Guards包含以下四種 : CanActivate : 用於控制是否允許進入路由。 CanActivateChild :用於控制是否允許進入子路由。 CanDeactivate : 用於控制是否允許離開路由。 CanLoad : 用於控制是否允許延遲載入Module。 Resolve : 用於在路由啟動ㄉ之前取得路由資料。 由上可知，雖然CanActivate和CanActivateChild同是用於控制是否允許進入路由，但CanActivateChild只針對子路由，其行路由為會有些不同。 以下面例子來說: 以為CanActivate例，當我們第一次拜訪A/B，Guard_1和Guard_2都會被執行，但是如果我們接著導向A/C，此時只有Guard_2會被執行。 那如果我們又接續著導向E/F會怎樣呢 ? 答案是Guard_1和Guard_2都會被執行，因為A/C導向至A/C並不是子路由的切換，所以Guard_1也會被執行。 const routes: Routes = [{ path: 'A', canActivate: [ Guard_1 ], children: [ { path: 'B', component: B_Component, canActivate: [ Guard_2 ] }, { path: 'C', component: C_Component, canActivate: [ Guard_2 ] } ] },{ path: 'E',...

在 上一篇文章 中，我們使用ComponentFactoryResolver動態產生Component。 今天我們來介紹ngComponentOutlet這個Directive，它的使用方式比ComponentFactoryResolver簡單許多，可以更輕鬆容易地達成動態產生Component的工作。 ngComponentOutlet的使用方式如下: <ng-container *ngComponentOutlet="YourComponentType; injector: YourInjector; content: YourContent; ngModuleFactory: YourModuleFactory;"> </ng-container> ※除了指定嵌入的Component Type，還有其他Input 選項，如injector 、content、ngModuleFactory。 ※injector : 當Component 需要使用到服務時，需配合ReflectiveInjector做注入的動作。 ※content : 當Component有用到<ng-content>時，這個欄位可以被用來插入要顯示在<ng-content> 的內容。 ※ngModuleFactory : 當Component 來自其他Module 時，需配合NgModuleFactory和Compiler做載入的動作。 如果我們拿 上一篇文章 的例子以ngComponentOutlet來改寫的話會變成這樣: <div *ngFor="let note of NoteComponents"> <ng-container *ngComponentOutlet="note"> </ng-container> </div> 看起來是不是比ComponentFactoryResolver還要更加簡潔和簡單!! 另外，如果我們今天要嵌入的是一個Template而不是Component ，那...

在 上一篇文章 中，我們使用Reactive Form動態產生表單欄位，但有時候我們難免也會遇到需要動態產生Component的需求。舉例來說，各位如果有用過Google Keep，它的每一個Note就是一個獨立的Component，當每次想要新增一個Note，勢必需要以動態的方式來產生Note Component。 這次我們以Note例子示範使用ComponentFactoryResolver動態產生Component，其重點流程如下: 1. 新增Note Component，並且在NgModule裡面加入entryComponents: [NoteComponent]。 import { Component, OnInit} from '@angular/core'; import { FormGroup, FormControl} from '@angular/forms'; @Component({ selector: 'app-note', templateUrl: './note.component.html', styleUrls: ['./note.component.css'] }) export class NoteComponent implements OnInit { Form: FormGroup; NoteID: number; constructor( ) { } ngOnInit() { this.InitForm(); } InitForm(): void { this.Form = new FormGroup({ Title: new FormControl(null), Content: new FormControl(null) }); } } <div class="col-sm-12"> <div class="card"> <div class="card-header font-weight-bold text-white bg-info...

一般我們使用Angular處裡表單的問題，對於資料結構較為複雜的Model，我們都會採用Data Driven的方式，也就是使用Reactive Form，因為這樣對於資料結構複雜的Model來說是比較容易維護與掌控。 回到今天的主題，我們將介紹使用 Reactive Form動態產生表單欄位。因為我們平常工作可能多少會遇到需要動態產生表單欄位的需求。舉例來說，像是訂單的問題，它的資料結構可能像是這樣: {OrderID:"A001", Items:[ {ItemName:"橡皮擦",Price:15,Quantity:10}, {ItemName:"鉛筆",Price:10,Quantity:10}, {ItemName:"筆記本",Price:25,Quantity:25} ]} 如果我們新增一筆Item，就需要動態的產生Item的DOM。其實在Angular要完成動態產生表單欄位這樣的需求，不管資料結構有多複雜，大致只需要用到 FormGroup、 FormArray、FormControl、ngFor、 track by 就能搞定了 !! 這裡我們將用訂單的例子，來示範使用 Reactive Form來動態產生表單欄位 1. 首先，我們使用FormGroup、 FormArray與FormControl將表單建立起來。 2. 為了能夠動態產生Items，對於欄位Items我們使用FormArray。 3. 建立AddItem、CreateItem，用於新增欄位。 4. 使用ngFor來產生出Items的DOM。 5. 利用trackBy ，減少DOM 更新次數，提升效能。 import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormArray } from '@angular/forms'; @Component({ selector: 'app-reactive-form-sample', templateUrl: './reactive-form-sample...

本次Angular 6 升級需要特別注意的事，在Angular 6將採用Rxjs 6，過去的Rxjs 5的語法將有些微的變動，但是沒關係只要乖乖依照官網上的步驟升級，就可以順利的無痛升級。 升級Angular 6的方式: 1. 更新Angular CLI (global and local)。    "npm update -g @angular/cli"    "npm update @angular/cli" 2. 執行"ng update --all" 更新所有相依性套件，此時既有的angular-cli.json轉為angular.json，點開angular.json會發現projects這個屬性，這意味著它可以讓多個Angular專案共用同一個 開發環境。 3. 雖然Angular 6 沒有破壞性更新，但Rxjs 6卻變動了不少，為了方便升級Rxjs 6，請全域安 裝"npm i -g rxjs-tslint"。 4. 執行rxjs-5-to-6-migrate -p src/tsconfig.app.json，會自動將專案內的Rxjs 5轉換成Rxjs 6的語法。 5. 如果專案內有相依的套件是Rxjs 6以前的版本的話，可以安裝rxjs-compat讓它向下相容。 "npm i rxjs-compat --save" 6. 如果專案想要轉成Progressive Web App (PWA) 架構，請執行"ng add @angular/pwa"，會自動加入 ngsw-config.json、manifest.json 與 service worker 設定。 參考文獻 1.  https://update.angular.io/