Question

我已经在线阅读了有关类似主题的文章，但都没有解决我的问题。我实际上可以在导航栏中启用下拉菜单的唯一方法是通过在index.html中包含以下脚本：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

我不能那样做，因为在产品中，该应用程序无法访问互联网。

我安装了它们并将其添加到angular.json

"scripts": [
  "../node_modules/jquery/dist/jquery.slim.min.js",
  "../node_modules/popper.js/dist/umd/popper.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

这不起作用（下拉菜单不会切换），并且所有路径都存在。

我尝试改用指令：

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;
  }
}

以及我的标头组件上：


<div class="container">
      <ul class="nav nav-pills">
          <li routerLinkActive="active" class="nav-item">
            <a routerLink='/compare' style="color: #B8B8B8;"class="nav-link">Compare</a></li>
          <li class="nav-item dropdown" appDropdown >
              <a role="button" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="cursor: pointer; color: #B8B8B8;">Settings</a>
              <div  class="dropdown-menu">
                  <a routerLink='/connections' class="dropdown-item" style="font-size:12px;">Server Connections</a>
                  <a routerLink='/admins' class="dropdown-item" style="font-size:12px;">Administrators</a>
              </div>
          </li>
      </ul>
</div>

仍然，不起作用。我也尝试过ngx-bootstrap和ng-bootstrap。没事。我的appModule：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HeaderComponent } from './core/header/header.component';
import { CoreModule } from './core/core.module';
import { AuthGuard } from './auth/auth.guard';
import {NgbDropdown, NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { AuthComponent } from './auth/auth.component';
import { FormsModule } from '@angular/forms';
import { AuthService } from './auth/auth.service';
import { AuthInterceptorService } from './auth/auth-interceptor.service';
import { DropdownDirective } from './directives/dropdown.directive';

@NgModule({
  declarations: [
    AppComponent,
    AuthComponent,
    DropdownDirective,
    NgbDropdown,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    CoreModule,
    FormsModule,

  ],

  exports:[
     HeaderComponent,
 ],
  providers: [AuthService, AuthGuard, {provide:HTTP_INTERCEPTORS, 
  useClass:AuthInterceptorService, multi:true}],
  bootstrap: [AppComponent]
})
export class AppModule { }

非常感谢您的帮助。谢谢：）

无法获得下拉菜单以在Angular 8应用程序中切换

0 个答案: