Problem
- 使用依賴注入應該注意些什么
- 服務一般用來做什么
- 指令一般用來做什么
- angular2如何提取公共組件
- angular2為什么不需要提公共組件
- 父組件與子組件之間如何通訊
- 什么時候應該使用ngModel
- 為什么要用Typescript？我喜歡JavaScript
- 為什么如Input之類的語法后面必須加()
Solution
使用依賴注入應該注意些什么
首先我們要明白什么是依賴注入(Dependency Injection, DI)，Java程序員應該不會陌生，DI是一種編程模式，它讓一個類從外部資源中獲取它的依賴，而不是自己親自創建它。這樣的好處是什么呢？好處就是我們不必去關心如何創建依賴這個過程，我們只需要舒服的使用這個已經創建好的實例就行。在angular2中使用DI一般是在組件中，注入的東西我們一般稱之為service，使用@Injectable()進行標記。在使用DI時需注意在Component中的providers中聲明該服務，然后在class中contructor中聲明即可，eg:
@Component({
selector: 'source-list',
styles: require('xxx.scss'),
template: require('xxx.html'),
providers: [Regions]
})
export class SourceList {
constructor(private Region: Regions) {
}
}
此外，若組件的父組件providers中引入了一個service，在其子組件中可不用引入直接在contructor中聲明即可；否則會報"not providers..."之類的錯誤
服務一般用來做什么
服務是什么呢？"Service" is a broad category encompassing any value, function or feature that our application needs. 它可以是值、函數或所需的特性等，一個典型的服務應該是具有專注、良好的定義的類。它應該做一件具體的事情，把它做好。我的理解，服務一般用來與后端通信即獲取組件所需數據，或者管理組件特定屬性的。
此外，服務的引入是單例的，也就是說你在一個組件中改變了這個服務對象的值，在另一個使用了該服務的組件也會跟隨該服務的變化而變化。
指令一般用來做什么
指令一般用來操作DOM，通過在組件的directives中引入，這個引入就是新生成一個實例，他們之間互不影響，這點與服務相反。在我看來，指令大多時候都是按功能封裝的一些組件，由父組件來統一使用。
還有另外兩種指令，結構型指令與屬性型指令。結構型 指令 會通過添加 / 刪除 DOM 元素來更改 DOM 樹布局。 NgFor 和 NgIf 就是兩個最熟悉的例子。屬性型指令改變一個元素的外觀或行為。
angular2如何提取公共組件
angular2框架層面上就對樣式進行了隔離，每個組件下屬的樣式對其他組件不會產生影響。
父組件與子組件之間如何通訊
父組件與子組件： 我一般通過input來實現，在子組件中用Input() 聲明從父組件接收的變量，在父組件template使用子組件的地方傳遞改數據，eg:
父組件
@Component({
selector: 'source-list',
styles: require('xxx.scss'),
template: `
<header>
<nav-header></nav-header>
<nav-breadcrumb [paths]="paths"></nav-breadcrumb>
</header>
`,
providers: [Regions]
})
export class SourceList {
constructor(private Region: Regions) {
}
path = '/source/list';
}
子組件
@Component({
selector: 'nav-breadcrumb',
template: require('./breadcrumb.html')
})
export class NavBreadcrumb {
constructor() {
}
@Input() paths;
}
子組件與父組件： 我一般通過借助output和EventEmitter類來實現，通過在子組件中使用@Output()聲明該類實例來獲得和父組件通信的通道，支持觸發事件並將相應數據返回，由父組件在template中使用處進行捕獲。eg:
父組件
@Component({
selector: 'source-list',
styles: require('xxx.scss'),
template: `
<header>
<nav-header></nav-header>
<select-dialog (cancelDialogRequest)="cancelDialog()"></select-dialog>
</header>
`,
providers: [Regions]
})
export class SourceList {
constructor(private Region: Regions) {
}
path = '/source/list';
cancelDialog() {
}
}
子組件
@Component({
selector: 'nav-breadcrumb',
template: require('./breadcrumb.html')
})
export class NavBreadcrumb {
constructor() {
}
@Output() cancelDialogRequest = new EventEmitter();
@Input() paths;
cancelDialog() {
this.cancelDialogRequest.emit(1);
}
}
什么時候應該使用ngModel
ngModel用於數據雙向綁定，一般形式為：
<input [(ngModel)]="title">
它實際上是：
<input [value]="title"
(input)="title=$event.target.value" >
這又是是嗎意思呢？我的理解是，[]表示值傳遞，也就是說這個值是其他地方定義的，這里就是引用了這個值，()表示事件監聽，監聽在此標簽中該值得變化，並將此變化傳遞會來源的地方。因此，我們可以利用這一特性，將數據傳遞到子組件中，並在父組件里響應該數據的變化。比如，現在我們在父組件中有一個orders變量，我在父組件的模板中可以這樣使用：
<delete-order-dialog [(orders)]="orders"></delete-order-dialog>
這樣，我們在子組件里input該對象，通過一定操作，對orders進行的改變都能傳遞回父組件，並相應的展示在頁面上。
為什么要用Typescript？我喜歡JavaScript
為什么要用typescript啊，我比較喜歡JavaScript這種弱類型的語言，想怎么用就怎么用，從來不需要考慮類型這些什么鬼。不管在什么領域都會有各種群體，就像目前的前端，就有React、Angular、Vue等，這些框架的使用者都很多，我們不能簡單的去評判一個框架的優劣及難易程度，因為有些東西就是為特定的人群設計的，比如typescript，Java這種后端程序員使用起來就會順手很多。嗯，秉持着多學點東西的開放心態，我開始使用spring、typescript了..
為什么如Input之類的語法后面必須加()
關於括號問題，官網其實已經多次提到了，Don't forget the parentheses! Neglecting them leads to an error that's difficult to diagnose. 沒有()就會導致不可預料的錯誤！一定要寫。為什么呢？這里我先做個假設，()在JavaScript里，一般都是執行某個函數，那么這里的input()，在我看就是執行了某個函數，標記了后面所跟着的變量，幫助程序運行定位的。
最后安利一波帶我的老司機雪狼老大翻譯的angular2中文官網
如想了解更多，請移步我的博客。
PS：我還是如風少年！