Question

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

top-menu-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()
       })
    }

}

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

1 个答案: