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

【问题标题】：Angular @HostBinding, simple example and fundamentalsAngular @HostBinding，简单示例和基础知识
【发布时间】：2019-04-14 21:35:19
【问题描述】：

我会非常了解 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';

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

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

非常感谢您的耐心等待！

【问题讨论】：

谢谢，但我没有在此链接中找到任何对我的具体问题的答案。

标签： angular angular2-hostbinding

【解决方案1】：

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

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

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

【讨论】：

非常感谢。换句话说，@HostBinding('someProperty') someVariable = 'someValue';意思是：将 someProperty 的属性（显然在我有选择器的标记元素中）设置为我已分配给 someValue 的 someVariable。 IE：如果我想将宿主元素的背景颜色设置为红色，我应该写 @HostBinding('style.color') color = 'red' 或 @HostBinding('style.color') color: string;如果我想在班级的其他点定义颜色。并且，所有都被引用到给定的选择器。对吗？
是的，没错，这里还有一个例子：@HostBinding('style.border-color') borderColor: string;还有 this.borderColor = 'pink';
完全理解。

【解决方案2】：

:host() CSS 伪类函数选择影子主机 shadow DOM 包含它在内部使用的 CSS（因此您可以选择一个来自其 shadow DOM 内部的自定义元素）——但前提是选择器给定的函数参数匹配影子主机。

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

试试这个就行了

component.css

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

【讨论】：

对不起，我不是这个意思。现在，我尝试在最初的问题中更清楚地解释。我与@HostBinding 行有关，仅此而已。
你的意思是样式不适用还是什么？
不，我的问题的主要目标不在于样式，而在于 HostBinding 命令。我已经编辑了我原来的问题。非常感谢您的耐心等待！
Angular 使用 shadow DOM 来封装样式。这就是您的样式没有被应用的原因
谢谢，但问题不是（不）集中在 css / dom 问题上，而是很好地理解 HostBinding 指令。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：