@Input

@Input是用來定義模組的輸入的，用來讓父模組往子模組傳遞內容：

@Component({
  selector: 'bank-account',
  template: `
    Bank Name: {{bankName}}
    Account Id: {{id}}
  `
})
class BankAccount {
  @Input() bankName: string;
  @Input('account-id') id: string;
  // this property is not bound, and won't be automatically updated by Angular
 

  normalizedBankName: string;
}
@Component({
  selector: 'app',
  template: `
     < bank-account bank-name="RBC" account-id="4747">< bank-account>
  `,
  directives: [BankAccount]
})
class App {}

在這個例子中，父模組是app，子模組是BankAccount， 在app中我們想往子模組裡面傳遞back-name和account-id這兩個資訊，可以通過property的方式最簡單直接，而子模組要接受這個 property就要用@Input來接收。子模組會在BankAccount裡面直接接收傳遞過來的property。傳遞的方式可以是駝峰法，也可以直接寫在input裡面，就如
例子裡面寫的那樣。要記住一點的是父模組在引用子模組的時候是用的[]。

@Output

子模組想自定義一些event傳遞給父模組又該怎麼做呢？這時候就要用到@Output了。

@Directive({
  selector: 'interval-dir',
})
class IntervalDir {
  @Output() everySecond = new EventEmitter();
  @Output('everyFiveSeconds') five5Secs = new EventEmitter();
  constructor() {
    setInterval(() => this.everySecond.emit("event"
 
), 1000);
    setInterval(() => this.five5Secs.emit("event"), 5000);
  }
}
@Component({
  selector: 'app',
  template: `
    < interval-dir (every-second)="everySecond()" (every-five-seconds)="everyFiveSeconds()">
    < /interval-dir>
  `,
  directives: [IntervalDir]
})
class App {
  everySecond() { console.log('second'); }
  everyFiveSeconds() { console.log('five seconds'); }
}

因為在普通的html裡面，比如button我們會有onclick這種event來監聽這個button是否被按了，然後angular2也完全允許我們自定義這種event listening的模式，我們可以給任何模組定義這種event，當觸發了event之後就會從子模組往父模組傳遞子模組的資訊。

再這個例子裡，父模組是app，子模組是IntervalDir， 然後在子模組定義event觸發的條件，比如每隔1s要觸發事件，每隔5s要觸發事件。然後當父模組監聽到這些事件時可以做相應的操作。當然我們如果想傳遞資訊，可以在new EventEmitter()裡面加入我們想要傳遞的東西，然後在使用的時候加入函式的引數裡面。比如我們想傳遞一個
test，我們只需要這麼改：

class IntervalDir {
@Output() everySecond = new EventEmitter(test);
}
< interval-dir (every-second)=”everySecond(test)” (every-five-seconds)=”everyFiveSeconds()”>
everySecond(test) { console.log(test); }

而在這裡，父模組在引用子模組的時候是用的()。

[(ngModel)]

最後當然是最經典的angular特有的ngModel雙向binding了。而這個特性是< input >特有的。我們注意到了 [(ngModel)] 既有[]也有()。沒錯它既有Input的特性也有Output的特性。

< input [(ngModel)]="hero.name" placeholder="name" > 

directives

主要是加入子模組的模組，當我們定義了一個模組之後，如果我們想要它被別的模組使用，必須定義一個出口被別的模組使用，比如app.component這個模組最後就要：

export class AppComponent {} 

讓angular2知道它是一個AppComponent模組，然後在boot裡面可以加入這個模組。同理我也export了HeroComponent，HeroFormComponent以及HeroesListComponent模組。然後在app.component的一開始就import進來，然後就要在directive加入這些模組然後在template才能識別相應的selector。如果
不在directive中引入相應的模組，那在compile的時候template就不知道相應的selector是啥就不能正常的render了。

providers

這個主要用來加入service的模組。當我們想在模組之中使用service的時候，和directive相同的道理，我們需要加入provider這樣這個模組就知道使用的service的provider。小G在用angular的過程中碰到最多的問題就是missing provider的問題，在angular1中可能是由於service的dependency之間有loop，
表示service互相依賴，會有問題。但angular2由於模組化了這個dependency injection的問題得到了很好的解決。如果再碰到這類問題首先要檢查模組是否加入了service provider。

styles

這個主要定義這個模組使用的css，不用放到外部的style.css裡面。這樣這個模組的css完全由自己掌控，是不是方便了很多？

< li *ngFor="#hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    < span class="badge">{{hero.id}}< /span> {{hero.name}}
< /li >

在html裡面用ngFor來迴圈這個list然後把list裡面的英雄輸出到html裡面。在這裡的語法和angular1完全不一樣了。在angular1裡面，完全沒有以及#的符號，但是在angular2裡面，和#確實很關鍵的語法。
( )這個在ngFor的字首表示整個< li >元素以及它的子元素合成一個master模板。如果不想使用( ),ngFor需要被包含在一個template的元素裡面：

< template ngFor #hero [ngForOf]="heroes" >
  < hero-detail [hero]="hero" >< /hero-detail >
< /template >

Angular2還有這個語法的就是ngIf。如果不用()也需要把ngIf包含在template裡面。