如何将变量传递给angular @HostBinding(variable_here)？

在Angular中，可以使用@HostBinding装饰器将变量传递给宿主元素。

@HostBinding装饰器允许我们将一个属性绑定到宿主元素的属性或样式。要将变量传递给@HostBinding，需要按照以下步骤进行操作：

1. 首先，在组件类中定义一个属性，用于存储要传递的变量的值。例如，我们可以定义一个名为variable_here的属性。
2. 在组件类中使用@HostBinding装饰器，将该属性绑定到宿主元素的属性或样式。例如，如果要将变量传递给宿主元素的class属性，可以使用@HostBinding('class')。
3. 在@HostBinding装饰器中，使用插值表达式将变量的值绑定到宿主元素的属性或样式。例如，如果要将变量_here的值绑定到宿主元素的class属性，可以使用@HostBinding('class.variable_here')。

下面是一个示例代码：

import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div [ngClass]="variable_here">Example Component</div>
  `,
})
export class ExampleComponent {
  variable_here = 'example-class';

  @HostBinding('class.variable_here')
  get variableHere() {
    return this.variable_here;
  }
}

在上面的示例中，我们定义了一个名为variable_here的属性，并将其绑定到宿主元素的class属性。然后，我们使用插值表达式将variable_here的值绑定到宿主元素的class.variable_here属性。

请注意，上述示例中的[ngClass]指令是可选的，用于动态添加/移除其他类。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
• 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
• 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云元宇宙（Tencent Real-Time Render）：https://cloud.tencent.com/product/trr