如何在 Angular 中使用 javascript 打开下拉菜单 onclick

Question

我正在尝试使用 javascript 在单击时实现下拉菜单项，而不使用 angular 中的 jquery

我尝试创建单独的 javascript 文件并在 angular json 文件中的脚本中指定文件路径。 它不工作。还有什么其他方法可以做到这一点？

<div class="tab-dropdown">
                  <div id="dropdown" (click)="dropClick()">Open Dropdown</div>
               </div>
               <ul class="nav" role="tablist" id="navdrop">
                  <li class="nav-item">
                     <a class="nav-link active" href="#all" role="tab" data-toggle="tab" onclick="addprevtext()">All</a>
                  </li> -->
                  <li class="nav-item ">
                     <a class="nav-link " href="#social" role="tab" data-toggle="tab" onclick="addprevtext()">HR</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#digital" role="tab" data-toggle="tab"
                        onclick="addprevtext()">Marketing
                     </a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#crm" role="tab" data-toggle="tab" onclick="changetext()">Customer Service</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#ticketing" role="tab" data-toggle="tab"
                        onclick="changetext()">Operations</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#coreSystem" role="tab" data-toggle="tab" onclick="changetext()">Insurance</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#dms" role="tab" data-toggle="tab" onclick="changetext()">Financial Services</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#manu" role="tab" data-toggle="tab" onclick="changetext()">Manufacturing
                           </a>
                     </li>
                     <li class="nav-item">
                           <a class="nav-link" href="#health" role="tab" data-toggle="tab" onclick="changetext()">Healthcare & Pharma

                              </a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link" href="#it" role="tab" data-toggle="tab" onclick="changetext()">IT

                                 </a>
                           </li>

               </ul>

js文件

function showDropdown() {
document.getElementById("dropdown").onclick = function() {myFunction()};

function myFunction() {
  document.getElementById("navdrop").classList.toggle("show");
}
}

ts 文件

dropClick() {
    showDropdown();

  }

点击后应打开下拉菜单

这是一个 MCVE：https://stackblitz.com/edit/angular-wrmrvu

Answer 1

我会选择@ViewChild() 和ElementRef，不需要在单独的 .js 文件中编写额外的代码，也不需要创建任何指令。

TS 代码：

导入这个：

import {  ElementRef, ViewChild } from '@angular/core';

和：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  @ViewChild('navdrop', null) navdrop: ElementRef; // Angular Version 8
  @ViewChild('navdrop') navdrop: ElementRef; // Angular Version < 8

  dropClick() {
    this.navdrop.nativeElement.classList.toggle("visibility");
  }
}

CSS：

.visibility {
  display: none;
}

HTML 代码：

                           This is important
                               \/\/\/\/
<ul class="nav" role="tablist" #navdrop id="navdrop">
   ... 
    your other HTML markup
   ...
</ul>

Working_Demo

Answer 2

您还需要能够同时打开多个下拉菜单，并且如果您按下它的外部，您需要将其关闭。您将需要在服务中控制它。

主指令

@Directive({
    selector: '[dropDown]'
})
export class Dropdown implements AfterContentInit, OnDestroy {
    private toggleSubscription: Subscription = new Subscription();
    private outSideSubscription: Subscription = new Subscription();
    @ContentChild(DropdownToogle) ddToggle: DropdownToogle;
    @HostBinding('class.dropdown') dropDownClass = true;
    @HostBinding('class.opened') opened: boolean;

    constructor(private element: ElementRef, private dropDownService: DropdownService) {
    }

    ngAfterContentInit(): void {
        this.toggleSubscription = this.ddToggle.clicked.subscribe(() => {
            this.opened = !this.opened;
            if (this.opened) {
                this.outSideSubscription = this.dropDownService.getAppClick().subscribe((target: any) => {
                    const clickedInside = this.element.nativeElement.contains(target);
                    if (!clickedInside) {
                        this.outSideSubscription.unsubscribe();
                        this.opened = false;
                    }
                });
            } else {
                this.outSideSubscription.unsubscribe();
            }
        });
    }

    ngOnDestroy(): void {
        this.toggleSubscription.unsubscribe();
        this.outSideSubscription.unsubscribe();
    }
}

还有下拉切换

@Directive({
    selector: '[dropDownToggle]'
})
export class DropdownToogle {
    @Output() clicked = new EventEmitter();
    @HostBinding('class.dropdown-toggle') true = true;
    @HostListener('click', ['$event']) onclick() {
        this.clicked.emit();
    }

}

还有服务

@Injectable()
export class DropdownService {
    private subject = new Subject<any>();
    constructor() {
        fromEvent(document, 'click').subscribe((event: any) => {
            this.subject.next(event.target);
        });
    }
    getAppClick(): Observable<any> {
        return this.subject.asObservable();
    }
}

基本的CSS

.dropdown{
  position: relative;
  float: right;
}
.dropdown .opened .dropdown-menu {
      display: block;
  }

.dropdown .dropdown-menu {
    display: none;
    right: 0;
    position: absolute;
    min-width: 160px;
}

您需要为下拉菜单中的按钮或锚链接添加样式 最后是用法

<div dropDown>
  <button dropDownToggle>A dropdown</button>
  <div class="dropdown-menu">
    <button>Do something</button>
    <button>Something else</button>
  </div>
</div>

Answer 3

这是带有角度的 bootstrap 4 的解决方案。

在你的package.json你需要

dependencies: {
  "@ng-bootstrap/ng-bootstrap": "^4.0.2",
  "bootstrap": "^4.3.1",
  ...
}

在您的app.module.ts 文件中，您需要添加一个模块

imports: [
  ...
  NgbModule.forRoot()
]

以上所有操作都是为了启用以下 3 个指令：ngbDropdown、ngbDropdownToggle 和 ngbDropdownMenu。

所以，现在您可以在组件的模板文件中使用它们。例如对于带有标题“更多...”和一个菜单项“项目”的下拉菜单，您需要这样的内容：

  <div ngbDropdown>
    <a ngbDropdownToggle
      class="btn btn-primary dropdown-toggle"
      id="navbarDropdownMenuLink"
      data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      More...
    </a>
    <div ngbDropdownMenu
      class="dropdown-menu"
      aria-labelledby="navbarDropdownMenuLink">
      Item
    </div>
  </div>

您可以在the official documentation of ng bootstrap 中找到更多示例。