如何绑定 Angular4 组件的输入参数

Question

我有一个正在 Angular4 中开发的小型网站（我在 Angular 中的第一次尝试）并且遇到了一个我似乎可以解决的问题。 简化我的场景是：

我有一个组件（帐户列表），它使用一个 html5 选择/选项控件，该控件从一个 rest api 填充并显示一个帐户列表。

我有第二个组件，它显示帐户的详细信息（account-detail）并将 accountId 作为输入参数。

在帐户列表组件中选择帐户时，我希望帐户详细信息自动更新到新选择的帐户。 我知道我的帐户列表组件工作正常，并且当我选择一个帐户时，ts 中的 selectAccountId 变量正在更新。

但是，我似乎无法获得对 selectAccountId 变量的更新以触发对帐户详细信息组件的更新。 我知道这个组件可以正常工作，因为显示了默认帐户，并且这个默认值的 id 在 account-list 组件的 ngOnInit 方法中设置。

account-list 组件中的相关 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>

account-list组件的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
        ); 
    }
}

account-detail组件的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([""]);
        }
    }
} 

老实说，我已经忘记了我试图使这项工作发生的事情，我读过的大多数博客、指南等都在谈论如何以另一种方式进行绑定，而我所做的一切都很好。 但是我找不到如何获取绑定以触发应该由这一行完成的 account-detail 组件的更新：

<!-- 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

因此，在您的帐户详细信息组件中，您将使用 ngOnInit 方法根据您选择的帐户 ID 获取一些数据。 ngOnInit 是一个生命周期钩子，在创建组件时调用一次。 当您更改选定的 id 时，angular 不会重新创建组件并且不会触发该方法。

您需要的是一种在更改变量时触发的方法。 您可以使用多种方法，查看这篇综合性文章以获取更多信息。

这是一个使用属性设置器在输入更改时触发方法调用的简单示例：

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
            );
        } 
    }
}