angular - 了解 @HostBinding 如何在 toggleClass 指令中以 Angular 工作

Question

我遇到了以下 Angular Directive(指令):

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

@Directive({
    selector: '[appDropdown]'
})

export class DropdownDirective {
    @HostBinding('class.open') isOpen = false;

    @HostListener('click') toggleOpen() {
        this.isOpen = !this.isOpen;
    }
}

在线浏览代码时，基本上代码只切换使用该指令的元素上的 open 类，因此可以像这样使用该指令:

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown" appDropdown>
        <a href="#" class="dropdown-toggle" role="button">Manage <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Save Data</a></li>
            <li><a href="#">Fetch Data</a></li>
        </ul>
    </li>
</ul>

现在我不明白的是指令中的以下代码行:

 @HostBinding('class.open') isOpen = false;

它到底在做什么，它的功能是什么？我不太理解上面的代码行。有人可以解释一下吗？

Answer 1

@HostBinding 允许您为指令的主机元素定义绑定(bind)。您可能知道有一个 special binding syntax for the class 看起来像这样:

<element [class.class-name]="expression">...</element>

您可以在 How [class] [attr] [style] directives work 中阅读实现细节。

在您的示例中，li 元素是宿主元素并且表达式是 isOpen 因此您引用的宿主绑定(bind)实质上定义了以下内容:

<li class="dropdown" appDropdown [class.open]="isOpen">