3

我会很好地理解 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';

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

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

非常感谢您的耐心等待！

4

4 回答 4

4

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

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

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

于 2018-11-12T09:28:36.760 回答
1 
@HostBinding('attr.class') cssClass = 'alfa';

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

于 2019-11-03T07:57:38.327 回答
1

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

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

试试这个它会工作

组件.css

:host(.alfa){
  color: red;
}
于 2018-11-12T07:39:56.670 回答
0

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

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

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

于 2019-10-09T06:07:44.343 回答