Angular 指令 @hostbinding 参数

【问题标题】：Angular directive @hostbinding argumentAngular 指令 @hostbinding 参数
【发布时间】：2018-04-30 15:43:48
【问题描述】：

无法理解有关 @Hostbinding 参数的内容：

代码：

import { Directive, HostBinding } from "@angular/core";

@Directive({
    selector: '[appDropdown]'
})
export class DropdownDirective {
    @HostBinding('class.open') isOpen = false;

}

为什么@Hostbinding() 中的参数作为class.open 传入？看起来这个类是一个对象什么的。

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

抓取一个元素并将其记录到控制台，如下所示：

console.log($('div'));

在控制台中，您会看到该元素就像一个对象，它具有字段和方法。您甚至可以更进一步，将以下内容记录到控制台：

console.log($("div").attributes.class.value);

你会看到控制台中显示的类。

在您的情况下，“class.open”意味着该元素必须可能有多个类。

你也可以这样看：

Element: {
     attributes : {
                  class : {
                        "open", etc... 
                  }
               }
}

我希望它可以帮助您了解那里发生了什么。

【讨论】：