如何添加多个具有host属性的类？

Question

组件.scss

:host {
  //some css props and values
}

:host.xyz {
  //some props and values
}

:host.pqr {
  //some props and values
}

组件.ts

@Component({
//all component's metadata added.
  host: {
    class: 'xyz', // how do i use class pqr here ?
  }
})
export class Component {
  type = input.required<String>(); //signal
}

组件.html

<ng-content />

问题：我想在主机属性中使用多个类，这是 @HostBinding()

的替代方案

或者：我尝试使用另一种方式，使用以下信号：

仅添加主机属性部分。

host: { '[class.xyz]': 'type === "xyz"', '[class.pqr]': 'type === "pqr"' }

使用上面的代码，它不会应用该类，因为应用该类时，输入属性未获取其值。

预期 - 当我们将基于 type = xyz 或 type = pqr 的类型输入作为字符串传递时，这些类应该应用于宿主元素。

Answer 1

您必须在

type()

的条件中执行信号（

host

）：

  @Component({
    selector: 'app-child',
    template: `
      <a target="_blank" href="https://angular.dev/overview">
        Learn more about Angular
      </a>
    `,
    host: {
      '[class.xyz]': 'type() === "xyz"',
      '[class.pqr]': 'type() === "pqr"',
    },
  })
  export class Child {
    type = input.required<string>(); //signal
  }