Angular 2 : @HostBinding 与输入对象属性

Question

是否可以像本示例那样绑定 @HostBinding 值？

@Input() user: User;
@HostBinding("class.temp") user.role == "Admin"

我知道我能做到：

private _user: User;
@Input() set user(user: User) {
    this._user = user;
    this.temp = (this._user.role == "Admin");
}
@HostBinding("class.temp") temp: boolean;

但在这种情况下，如果我的用户更改其角色，则该组件中的值将永远不会更新。这该怎么做？

Answer 1

这就是我在对象上进行主机绑定的方式属性:

@Input()
public user: User;

@HostBinding('class.example')
public get isExample(): boolean {
     return this.user && this.user.role === 'admin';
}

如果您发现自己卡住了，只需要让该功能正常工作。您可以使用 DoCheck 界面在每次更改检测时检查角色更改。这告诉 Angular 为每个变化检测调用 ngDoCheck。

@Input()
public user: User;

@HostBinding('class.example')
public isExample: boolean;

public ngDoCheck(): void {
     this.isExample = this.user && this.user.role === 'admin';
}

以上内容增加了应用程序的开销，并非最佳做法。

您应该将输入分成 User 和 role，如下所示：

@Input()
public user: User;

@Input()
public role: string;

@HostBinding('class.example')
public get isExample(): boolean {
    return this.role === 'admin';
}

这是最简单的解决方案。因为它使用 Angular 自己的变化检测。

另一个解决方案是使 user 对象不可变。这样，每次更改属性时都会创建一个新的用户对象。这也将触发 Angular 中的更改检测，并且是在绑定中处理对象的首选方式。

话虽如此，不可变具有局限性，使用起来可能会很痛苦。

还有其他解决方案，例如自定义 observable 和使用 ChangeDetectRef 告诉组件发生了一些变化。这些解决方案涉及更多，我认为组件应该保持简单。

我尝试遵循原始绑定规则。组件的所有输入都是数字或字符串类型。避免使用数组和对象。

在您的示例中，您的组件是否真的需要对用户对象的完全访问权限或只是它的某些属性？如果您为每个需要的属性添加输入，那么您已经将组件与用户对象分离，这也使得测试更容易。

Angular 2 : @HostBinding 与输入对象属性

Angular 2 : @HostBinding with an Input object property

angular2-hostbinding

angular

Angular 2 : @HostBinding 与输入对象 属性

Angular 2 : @HostBinding with an Input object property

angular2-hostbinding

angular

Angular 2 : @HostBinding 与输入对象属性