导航栏中的下拉按钮不适用于角度cli答案

【问题标题】：Dropdown button inside navbar not working on angular cli导航栏中的下拉按钮不适用于角度cli
【发布时间】：2018-09-07 20:12:50
【问题描述】：

我正在尝试在 Angular cli 的导航栏中使用下拉按钮，但是当我单击它时它根本不起作用，我已经尝试了多个代码 sn-ps 并且它们都没有真正起作用，但问题是实际上特定于根本不会下降的下拉按钮。我正在使用 ngx-bootstrap，我的模板代码以及 component.ts 代码如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BsDropdownModule } from 'ngx-bootstrap';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BsDropdownModule.forRoot(),
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Feel Good Inc.</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
  </body>
</html>

【问题讨论】：

标签： angular web command-line-interface navbar dropdown

【解决方案1】：

我想你忘了添加一堆角度指令，看看下面的代码。 1）dropdown上李 2) dropdownToggle 在锚标签上 3) *dropdownMenu 在 div 上

<li class="nav-item dropdown" dropdown>
<a class="nav-link dropdown-toggle" href dropdownToggle (click)="false" id="navbarDropdownMenuLink" data-toggle="dropdown"
 aria-haspopup="true" aria-expanded="false">
    Dropdown link
</a>
<div class="dropdown-menu" *dropdownMenu aria-labelledby="navbarDropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>

【讨论】：