Angular @HostBinding，简单示例和基础知识

Question

我会很好地理解 Angular @HostBinding 概念。不幸的是，我的书很好，但这个概念解释得不是很清楚。

请看代码：

@Component({
  selector: 'app-test-component',
  templateUrl: './test-component.component.html',
  styleUrls: ['./test-component.component.css']
})
export class TestComponentComponent implements OnInit {

  @Input() dataModel:AppModel;
  @HostBinding('attr.class') cssClass = 'alfa';

  constructor() { 

(...)

我个人的解释：“主机绑定允许从组件本身（换句话说，从我下面提到的这个文件）中设置主机元素（在本例中为 app-test-component 标记）中的某些内容；在这种情况下，我将此标签的类属性设置为名为 cssClass 的变量并使用属性“alfa””。这是对的吗？

在这种情况下，如果我在相应的CSS文件中定义了“alfa”样式，为什么我在显示我的组件的页面中看不到这种样式（即背景颜色或其他颜色）？

编辑

我需要很好地理解这一行

@HostBinding('attr.class') cssClass = 'alfa';

这是否完全等同于“将模板元素的 class 属性设置为分配给值'alfa'的字符串 cssClass”？（或者，换句话说，与主模板标签中的指令“class='alfa'”相同）

并且，您能给我写一个具有相同结果但不使用 @hostbinding 的示例吗？我相信比较这些等效的解决方案对我来说非常有帮助。

Answer 1

在 Angular 中，@HostBinding() 函数装饰器允许您从指令类设置宿主元素的属性。

假设您想要更改样式属性，例如高度、宽度、颜色、边距、边框等，或指令类中宿主元素的任何其他内部属性。在这里，您需要使用 @HostBinding() 装饰器函数来访问宿主元素上的这些属性，并在指令类中为其分配一个值。

@HostBinding() 装饰器采用一个参数，即我们要在指令中分配的主机元素属性的名称。