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

Question

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

顶部菜单-links.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();
    }

}

顶部菜单-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()
       })
    }

}

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

How do I call a directive's method when there are multiple instances of directive in same template?

ngx-bootstrap

angular