角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與輸入對象屬性

回答

相關問題