Question

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

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

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

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

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

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

Answer 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` ];

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

Angular 6 HostBinding有多个值？

1 个答案: