具有多个值的Angular 6 HostBinding？答案

【问题标题】：Angular 6 HostBinding with multiple values?具有多个值的Angular 6 HostBinding？
【发布时间】：2018-10-25 15:46:24
【问题描述】：

我已在我的 Angular 6 应用程序中成功使用 @HostBinding 将属性应用到主机组件，就像在变量为真时应用类一样：

@HostBinding('class.compact-ui') isCompact;

但是，现在我需要根据选择菜单的模型分配 4 个可能的类之一。例如，用户可以red、blue 或green。

我想我可以在任何颜色为真时使用多个主机绑定：

@HostBinding('class.green-ui') uiColor === 'green';

但这似乎是错误的。这样做的正确方法是什么？

【问题讨论】：

标签： angular angular-components angular2-hostbinding

【解决方案1】：

要将多个类分配给主机，您可以这样做：

@HostBinding('class') classAttribute: string = 'classA classB';

对于您的情况，您可以这样做：

@HostBinding('class') classAttribute: string;

// Example function that updates the classAttribute property
// You might handle it differently in your application
updateClassAttribute(color: string, isCompact: boolean) {
  const classes: string[] = [`${color}-ui`];

  if (isCompact) classes.push('compact-ui');

  this.classAttribute = classes.join(' ');
}

注意上面的函数逻辑可以写成一行，像这样：

this.classAttribute = [ ...isCompact ? ['compact-ui'] : [], `${color}-ui` ].join(' ');

此外，如果您在应用程序的多个位置需要这些值（isCompact、color），您可以考虑使用 Redux 存储（例如 @ngrx/store）。

【讨论】：