Angular4コンポーネントの入力パラメータをバインドする方法

Question

私はAngular4で開発している小さなWebサイトを持っています（私の最初のAngularでの試みです）。私のシナリオは簡略化されています：

残りのAPIから入力されたhtml5選択/オプションコントロールを使用してアカウントの一覧を表示するコンポーネント（account-list）があります。

私は、アカウントの詳細（account-detail）を表示し、accountIdを入力パラメータとして持つ2番目のコンポーネントを持っています。

アカウントリストコンポーネントでアカウントを選択すると、アカウント詳細が新しく選択されたアカウントに自動更新されます。私は自分のaccount-listコンポーネントが正常に動作していることを知っています。アカウントを選択すると、TSのselectAccountId変数が更新されています。

しかし、アカウント詳細コンポーネントの更新をトリガーするselectAccountId変数の更新を取得できないようです。私は、このコンポーネントがデフォルトのアカウントが表示され、このデフォルトのidがaccount-listコンポーネントのngOnInitメソッドで設定されているので、独自のコンポーネントが正常に動作することを知っています。

口座リスト・コンポーネントの関連HTML5：

<select id="Id" #Id="ngModel" class="hideLabel form-control" [(ngModel)]="selectedAccountId" name="Id"> 
    <option [ngValue]="account.Id" *ngFor="let account of accounts">   
     {{account.Name}}   
    </option>   
</select>   

<!-- this div just to prove that selectedAccountId changes when a new account is selected, which it does --> 
<div *ngIf="selectedAccountId"> 
    {{selectedAccountId}} 
</div> 

<!-- this is the line which does not seem to work, changes to selectedAccountId are not triggering the component to refresh --> 
<account-detail *ngIf="selectedAccountId" [account]="selectedAccountId"></account-detail> 

アカウントリスト成分のTSコード：

export class AccountListComponent implements OnInit { 
    selectedAccountId: number; 

    title: string; 
    accounts: AccountHeader[]; 
    errorMessage: string; 

    constructor(private accountService: AccountService, private router: Router) { } 

    ngOnInit() { 
     var s = this.accountService.getLatest(); 

     s.subscribe(
      accounts => { 
      this.accounts = accounts; this.selectedAccountId = this.accounts[0].Id; 
      }, 
      error => this.errorMessage = <any>error 
     ); 
    } 
} 

アカウント詳細コンポーネントのTSコード：

export class AccountDetailComponent { 
    @Input("account") selectedAccountId: number; 
    account: Account; 

    selectedLicense: License; 

    constructor(
     private authService: AuthService, 
     private accountService: AccountService, 
     private router: Router, 
     private activatedRoute: ActivatedRoute) { 
    } 

    ngOnInit() { 
     if (this.selectedAccountId) { 
      this.accountService.get(this.selectedAccountId).subscribe(
       account => this.account = account 
      ); 
    } 

     else { 
      this.router.navigate([""]); 
     } 
    } 
} 

私はこの仕事をしようとしたことを忘れてしまいました。ほとんどのブログ、ガイドなど私は他の方法をバインドする方法について話を読んで、私はすべてうまく動作している。 、私はこれが正常に動作している本を、次のしてきた

<!-- this is the line which does not seem to work, changes to selectedAccountId are not triggering the component to refresh --> 
<account-detail *ngIf="selectedAccountId" [account]="selectedAccountId"></account-detail> 

：しかし、私はこの行によって達成されなければならないアカウント詳細コンポーネントの更新をトリガするバインディングを取得する方法を見つけることができませんもともとはAngularJSで作業していましたが、その後Angular2（4）に移行しました。

ご協力いただきありがとうございます。

Answer 1

アカウント詳細コンポーネントでは、選択したアカウントIDに応じてngOnInitメソッドを使用してデータを取得しています。 ngOnInitは、コンポーネントが作成されるときに一度呼び出されるlifecycle hookです。選択したIDを変更すると、angleはコンポーネントを再作成せず、メソッドは起動しません。

必要なものは、変数を変更したときに発生するメソッドです。いくつかのアプローチがあります。詳しくはthis comprehensive postをご覧ください。ここで

は、入力が変更されたときにメソッド呼び出しをトリガーするプロパティのセッターを使った簡単な例です：

export class AccountDetailComponent { 
    selectedAccount: Account; 

    private _selectedAccountId: number; 
    @Input("account") set selectedAccountId(value: number) { 
     this._selectedAccountId = value; 
     this.getAccount(); 
    } 

    getAccount() { 
     if (this._selectedAccountId) { 
      this.accountService.get(this._selectedAccountId).subscribe(
       account => this.selectedAccount = account 
      ); 
     } 
    } 
}