是否可以像此示例一样绑定(bind) @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;
但在这种情况下,如果我的用户更改其 Angular 色,则该组件中的值将永远不会更新。这个怎么做 ?
最佳答案
这就是我在对象属性上进行主机绑定(bind)的方式:
@Input()
public user: User;
@HostBinding('class.example')
public get isExample(): boolean {
return this.user && this.user.role === 'admin';
}
如果您发现自己陷入困境,并且只需要让该功能正常运行。您可以使用 DoCheck
界面在每次更改检测时检查 Angular 色更改。这告诉 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 中的更改检测,并且是在绑定(bind)中处理对象的首选方式。
话虽如此,不可变也有局限性,而且使用起来可能会很痛苦。
还有其他解决方案,例如自定义可观察量和使用 ChangeDetectRef
告诉组件某些内容发生了变化。这些解决方案涉及更多,我认为组件应该保持简单。
我尝试遵循原始绑定(bind)规则。其中组件的所有输入都是数字或字符串类型。避免数组和对象。
在您的示例中,您的组件是否真的需要完全访问用户对象或仅访问其中的某些属性?如果您为所需的每个属性添加输入,那么您就将组件与用户对象解耦了,这也使得测试变得更加容易。
关于 Angular 2 : @HostBinding with an Input object property,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45486585/