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标记）中通过其自身的组件（换句话说，从我在下面提到的该文件中）设置某些内容；在这种情况下，我将此标签的class属性设置为名为cssClass的变量，并设置属性“ alfa””。正确吗？

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

非常感谢您！

编辑：我需要非常了解行

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

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

而且，您能不能给我写一个同样结果但不使用@hostbinding的示例？我敢肯定，在比较中看到两个等效的解决方案对我很有帮助。

非常感谢您的耐心！

Answer 1

：host（）CSS伪类函数选择的影子主机。包含在内部使用的CSS的阴影DOM（因此您可以选择一个来自其影子DOM内部的自定义元素）-但仅当选择器时该函数的参数与影子主机匹配时给出。

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/:host()

尝试一下，它将起作用

component.css

:host(.alfa){
  color: red;
}

Answer 2

在Angular中，@ HostBinding（）函数装饰器使您可以从指令类中设置宿主元素的属性。

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

@HostBinding（）装饰器带有一个参数，即主机元素属性的名称，我们要在指令中分配该值。

Answer 3

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

这行代码意味着您在主机元素上放置了一个名为cssClass的属性，并且希望每次此属性更改时attr.class属性都将相应地更改。

Answer 4

使用HostBinding可以设置宿主元素的属性，例如宿主元素的高度。 @HostBinding（）装饰器允许访问元素的height属性（例如）并分配一个值。 HostBinding装饰器采用一个参数，这是主机元素属性的名称。在这种情况下，高度

@HostBinding('style.height') height: string;
constructor(){
  this.height = '15px';
}

这里的问题是“ @HostBinding（'attr.class'）cssClass ='alfa';”表示我们希望每个“ app-test-component”（组件的选择器）都具有css类alfa。

Angular @HostBinding，简单示例和基础

4 个答案: