Question

我有一个我在Angular4中开发的小网站（我在Angular的第一次尝试），并且遇到了一个我似乎无法弄清楚的问题。简化我的方案是：

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

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

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

但是，我似乎无法获得selectAccountId变量的更新，以触发对帐户详细信息组件的更新。我知道这个组件可以正常工作，因为显示了一个默认帐户，并且这个默认的id是在帐户列表组件的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

因此，在您的帐户详细信息组件中，您使用ngOnInit方法根据所选的帐户ID获取一些数据。 ngOnInit是lifecycle hook，在创建组件时调用一次。当您更改所选的id时，angular不会重新创建组件，并且该方法不会触发。

您需要的是一种在更改变量时触发的方法。您可以使用多种方法，请查看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
            );
        } 
    }
}

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

1 个答案: