角2：@HostBinding与输入对象属性

是否有可能像这个例子绑定@HostBinding值？角2：@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;

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

来源

2017-08-03 Mattew Eon

这是我做一台主机上的对象属性的绑定：如果你发现自己陷入了困境

@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中的变化检测，并且是绑定中处理对象的首选方式。

这样说，不可变有限制，可以是一个痛苦的工作。

还有其他的解决方案，如自定义的观测和使用ChangeDetectRef以告知组件东西已经改变。这些解决方案涉及更多，我认为组件应该保持简单。

我尝试按照原始绑定规则。其中组件的所有输入都是类型编号或字符串。避免数组和对象。

在你的例子中，你的组件真的需要完全访问用户对象还是它的一些属性？如果您为需要的每个属性添加输入，那么您已将该组件从用户对象中分离出来，这也使测试更容易。

来源

2017-08-03 14:19:48 cgTag

角2：@HostBinding与输入对象属性

回答

相关问题