angular2 組件之間傳參數

將登錄框的用戶名和密碼傳遞到子組件，正確寫法：

Name: <input [(ngModel)]="username" class="form-control"><br>
Password: <input [(ngModel)]="password" class="form-control">
<button class="btn btn-sm btn-primary" (click)="submit()">提交</button>
<home-test [auth]="login"></home-test>

export class ExampleFather {

    username: any;
    password: any;
    login: any;

    submit() {
       this.login = this.getOption();
    }

    getOption() {
        let option = {
            username: this.username,
            password: this.password
        };
        return option;
    }

}

export class ChildComponent {

    @Input() auth: any;
    @Input('auth') set changeName(val: any) {
        console.log(val);
    }
}

這樣寫就能保證每次傳遞給子組件的login對象是新產生的，angular2 就能監聽到對象變化

錯誤寫法：

Name: <input [(ngModel)]="login.username" class="form-control"><br>
Password: <input [(ngModel)]="login.password" class="form-control">
<button class="btn btn-sm btn-primary" (click)="submit()">提交</button>
<home-test [auth]="login"></home-test>

這種寫法在子組件中只能監聽到一次，更改login對象的值是不會傳遞到子組件的，我試着用ngOnChanges來監聽也沒有變化，我理解在單向數據綁定的時候源數據的value值必須有明顯的變化，而單個參數的value變化很容易監聽到，可是傳遞對象時可能因爲對象內部value變了但key沒有變，使得angular2 認爲整個對象就沒有變化，因此在子組件中沒有實時更新

正確寫法的關鍵在於每次調用getOption方法時有建立新對象的動做，因此被監聽到了

官網也解釋了，Angular 只會在輸入屬性的值變化時調用生命週期鉤子。 而login屬性的值是一個對象的引用 。 Angular 不會關注這個對象的屬性的變化。 這個對象的引用沒有發生變化，因而從 Angular 的視角看來，也就沒有什麼須要報告的變化了。相關知識：https://angular.cn/docs/ts/latest/guide/lifecycle-hooks.html