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() { 

(...)

个人解释："host binding allow to set something in the host element (in this case the app-test-component tag) from within the component it self (in other words, from this file I mentioned below); in this case, I set the class attribute of this tag to the variable named cssClass and with attribute 'alfa'"。正确吗？

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

非常感谢！

编辑：我需要很好地理解这一行

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

您能否确认这与 "set the class attribute of the template element to the string cssClass assigned to value 'alfa'" 完全相同？（或者，换句话说，与主模板标签中的指令"class='alfa'"相同）

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

非常感谢您的耐心等待！

Answer 1

The :host() CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host.

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

尝试一下它会起作用

component.css

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

Answer 2

在 Angular 中，@HostBinding() 函数装饰器允许您从指令 class.

中设置宿主元素的属性

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

中为其赋值

@HostBinding() 装饰器接受一个参数，宿主元素的名称属性我们要在指令中分配的值。

Answer 3

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

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

在问题中，“@HostBinding('attr.class') cssClass = 'alfa';”意味着我们希望每个 "app-test-component"（组件的选择器）都有 css class alfa。

Answer 4

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

这行代码意味着您在宿主元素上放置了一个名为 cssClass 的属性并且您希望每次属性更改 attr.class 属性都会更改因此.

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

Angular @HostBinding, simple example and fundamentals

angular

angular2-hostbinding