Angular指令@hostbinding参数

Question

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

代码：

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

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

}

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

Answer 1

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

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

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

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

您将看到控制台中显示的课程。

在你的情况下＆＃34; class.open＆＃34;意味着该元素必须具有多个类。

你也可以这样看：

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

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