2

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

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

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

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

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

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

4

3 回答 3

5

要将多个类分配给主机，您可以执行以下操作：

@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(' ');

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

于 2018-10-25T13:42:57.270 回答
1

注意：这适用于最新版本的 Angular，可能不适用于旧版本（根据问题标题）。

也可以返回一个对象，它将所有true值添加到元素并从元素中删除所有false值。

  /** The size of the button. */
  @Input() size: ButtonSize = 'md';

  /** The classes to attach to the element. */
  @HostBinding('class')
  get elementClasses() {
    return {
      'primary-button': true,
      [`primary-button--${this.size}`]: true,
      'primary-button--color': false
    }
  }
于 2022-02-13T17:20:26.183 回答
1

你也可以用风格来做到这一点：

@HostBinding('style')
get style_binding()
{
    return { 
        display: 'grid',
        gap: this.config.internalGap,
        margin: this.config.margin,
        gridArea: this.config.area
    };
}
于 2022-02-12T03:19:40.173 回答