角指令@hostbinding参数

Question

Having trouble understanding something regarding the @Hostbinding argument:

Code:

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

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

}

Why is the argument in the @Hostbinding() passed in as class.open ? It looks like the class is an object or something.

Answer 1

Grab an element and log it to the console like so:

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

In the console you'll see that that element is like an object, it has fields and methods. You could even go further and log the following to the console:

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

and you will see the class displayed in the console.

In your case "class.open" means that that element must likely has more than one class.

You can also see it like this:

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

I hope it helps you see what's happening there.