javascript - 如何绑定(bind) Angular4 组件的输入参数

Question

我有一个用 Angular4 开发的小型网站(我第一次尝试使用 Angular)，遇到了一个我似乎可以解决的问题。简化我的场景是:

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

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

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

但是我似乎无法更新 selectAccountId 变量来触发对帐户详细信息组件的更新。我知道这个组件本身可以正常工作，因为会显示默认帐户，并且此默认帐户的 ID 是在帐户列表组件的 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([""]);
        }
    }
} 

老实说，我已经忘记了我为使这项工作所做的努力，我读过的大多数博客、指南等都是关于如何以另一种方式绑定(bind)的，而且我的所有工作都很好.但是我找不到如何获取绑定(bind)以触发应通过此行完成的帐户详细信息组件的更新:

<!-- 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 是一个 lifecycle hook在创建组件时调用一次。当您更改选定的 id 时，angular 不会重新创建组件并且不会触发该方法。

您需要的是一种在您更改变量时触发的方法。您可以使用多种方法，查看 this comprehensive post了解更多信息。

这是一个简单的例子，使用属性 setter 在输入更改时触发方法调用:

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