当同一个模板中有多个指令实例时，如何调用指令的方法？

Question

我有一个带有多个下拉菜单的导航栏。我正在使用 ngx-bootstrap 提供的指令来处理下拉行为。我想通过在鼠标悬停时打开下拉菜单并在鼠标移开时关闭它们来添加自定义功能。我需要在鼠标移出时调用 BsDropdownToggleDirective 的 onEsc() 函数。当我使用 @ViewChild 实现此功能时，它仅适用于第一个下拉列表，但不适用于第二个下拉列表。当我删除第一个下拉菜单时，第二个下拉菜单将起作用。如何为打开的下拉菜单调用 onEsc() ？

顶部菜单链接.component.ts

import { Component, ViewChild } from '@angular/core';
import { BsDropdownToggleDirective } from 'ngx-bootstrap/dropdown';

@Component({
    selector: 'top-nav-main',
    templateUrl: './top-menu-links.component.html',
    // styleUrls: [ './top-menu-links.component.scss' ]
})
export class TopMenuLinksComponent {
    @ViewChild(BsDropdownToggleDirective) dropdown:BsDropdownToggleDirective;

    public closeDropdown():void {
        this.dropdown.onEsc();
    }

}

top-menu-links.component.html

<li class="dropdown" bsDropdown triggers="mouseover" >
                <a bsDropdownToggle dropdown-toggle data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" (mouseout)="closeDropdown()">Features<span class="caret"></span></a>
                <ul class="dropdown-menu" *bsDropdownMenu>
                    <li class="nav-item"><a class="nav-link" routerLink="feature-1">Feature 1</a></li>
                    <li class="nav-item"><a class="nav-link" routerLink="feature-2">Feature 2</a></li>
                    <li class="nav-item"><a class="nav-link" routerLink="feature-3">Feature 3</a></li>
                </ul>
            </li>
            <li class="dropdown" bsDropdown triggers="mouseover">
                <a bsDropdownToggle dropdown-toggle data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" (mouseout)="closeDropdown()">Company<span class="caret"></span></a>
                <ul class="dropdown-menu" *bsDropdownMenu>
                    <li class="nav-item"><a class="nav-link" routerLink="app-about-us">About</a></li>
                    <li class="nav-item"><a class="nav-link" routerLink="app-faq">Frequently Asked Questions</a></li>
                    <li class="nav-item"><a class="nav-link" routerLink="app-contact-us">Contact</a></li>
                </ul>
            </li>

Answer 1

如上所述，你必须使用@ViewChildren装饰器。请尝试一下这个：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { BsDropdownToggleDirective } from 'ngx-bootstrap/dropdown';

@Component({
    selector: 'top-nav-main',
    templateUrl: './top-menu-links.component.html',
    // styleUrls: [ './top-menu-links.component.scss' ]
})
export class TopMenuLinksComponent {
    @ViewChildren(BsDropdownToggleDirective) dropdowns: QueryList<BsDropdownToggleDirective>;

    public closeDropdown():void {
        this.dropdowns.forEach((dropdown) => {
          dropdown.onEsc()
       })
    }

}

Answer 2

@Directive 提供了一个“exportAs”属性，然后可以从模板引用您的指令。

@Directive({
 selector: '[BsDropdownToggleDirective]',
 exportAs: 'bsDropdown' // <- add the name you want here
})

然后在模板中，您可以使用 # 符号创建元素引用，即

<div #theDropdown="bsDropdown">Hello</div>

这意味着您应该能够在控制器中使用@ViewChild

@ViewChild("theDropdown")
dropDown: BsDropdownToggleDirective;

由于您在模板中也有参考，因此您也可以直接在模板中使用它：

<div #theDropdown="bsDropdown">Hello</div>
<button (click)="bsDropdown.onEsc()">Close drop down</button>