Bootstrap выпадающий с Angular 6

Question

Я пытаюсь создать выпадающий элемент в навигационной панели Bootstrap, используя Angular 6. Мой код работает, когда я тестирую его онлайн:

<nav class="navbar bg-light navbar-light navbar-expand">
<ul class="navbar-nav">
  <li class="nav-item dropdown" >
    <a class="nav-link dropdown-toggle" data-toggle="dropdown">Page1</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Page1.1</a>
    </div>
  </li>
  <li><a class="nav-link" href="#">Page2</a></li>
</ul>
</nav>

Но раскрывающийся список не работает с Angular 6. IИспользовал следующий метод для использования Bootstrap с Angular:

ng add @ng-bootstrap/schematics

И все работает отлично, за исключением этого выпадающего элемента!

Answer 1

Ответ @ Rushikesh Salunke великолепен, но в то время, когда я видел это, я уже использовал библиотеку @ ng-bootstrap, а не ngx, и это то, что я нашел из документов .

Сначала импортируйте модуль NgbDropdown в компонент, который вы хотите использовать.

import { NgbDropdown} from '@ng-bootstrap/ng-bootstrap';

Затем измените ваш .html следующим образом:

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <button class="dropdown-item">Action - 1</button>
    <button class="dropdown-item">Another Action</button>
    <button class="dropdown-item">Something else is here</button>
  </div>
</div>

Вы можете увидеть другие варианты использования здесь .

Answer 2

Ранее я сталкивался с той же проблемой и обнаружил следующее:

1. HTML должен быть связан с классом container в начальной загрузке, как указано в Схема начальной загрузки
2. Выпадающие версии построены на сторонней библиотеке Popper.js, как указано в Bootstrap Dropdown

Насколько я знаю из вашей проблемы, вы не ссылались на требуемую javascript, т.е. util.js, bootstrap.js, popper.js или минимизированную версию.

Здесь я ничего не сделал, просто ссылаюсь на необходимые файлы javascript в индексном файле

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

И я создал навигационный компонент и дизайн, как требуется:

<div class="container">
    <!-- Content here -->
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
                <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 class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</div

Рабочую демонстрацию можно найти здесь . Надеюсь, это поможет вам.

Answer 3

Я столкнулся с той же проблемой начальной загрузки, но я нашел решение. Если вы используете Angular 6, тогда не нужно добавлять popper.js для начальной загрузки. Вам нужно добавить загрузчик 4, а затем добавить rxjs-compat .

npm install rxjs-compat

И добавьте ngx-bootstrap для выполнения выпадающего действия. Установите ngx-bootstrap,

npm install ngx-bootstrap --save

теперь нам нужно добавить выпадающий модуль из ngx-bootstrap в вашем приложении, используя следующий код

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';

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

Затем я сделал некоторые изменения в вашем коде, и он прекрасно работает для меня.

<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
  <li class="dropdown" dropdown >
    <a dropdownToggle role="button"> <!-- {2} -->
        Page1<span class="caret"></span></a>
    <div *dropdownMenu class="dropdown-menu">
      <a class="dropdown-item" href="#">Page1.1</a>
    </div>
  </li>
  <li><a class="nav-link" href="#">Page2</a></li>
</ul>
</nav>

Answer 4

Вот, пожалуйста ...

Я сделал следующие изменения -

1.app.component.html

<p>
  Start editing to see some magic happen :)
</p>
<nav class="navbar bg-light navbar-light navbar-expand">
<ul class="nav navbar-nav">
  <li class="dropdown" appDropdown>
    <a href="#" class="dropdown-toggle" role="button">Page1</a>
    <ul class="dropdown-menu">
      <li><a href="#">Page1.1</a></li>
      <li><a href="#">Page1.2</a></li>
      <li><a href="#">Page1.3</a></li>
    </ul>
  </li>
  <li><a class="nav-link" href="#">Page2</a></li>
</ul>
</nav>

2.app.module.ts

Я добавил одну директиву для прослушивания события щелчка для выпадающего списка и импортировал ее в app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

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

import { DropdownDirective } from './dropdown.directive';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, DropdownDirective ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

3.dropdown.directive.ts

Добавлена ​​директива для прослушивания события щелчка

import { Directive, HostListener, ElementRef, Renderer2 } from "@angular/core";

@Directive({
  selector: '[appDropdown]'
})

export class DropdownDirective {
  manageDropdown : boolean = false;

  constructor(private elementRef: ElementRef, private renderer: Renderer2)   {

  }

  @HostListener('click') openDropdown(eventData: Event) {
    if(!this.manageDropdown) {
      this.renderer.addClass(this.elementRef.nativeElement,'open');
      this.manageDropdown = !this.manageDropdown;
    } else {
      this.renderer.removeClass(this.elementRef.nativeElement, 'open');
      this.manageDropdown = !this.manageDropdown;
    }
  }
}

4.angular.json

Запрос на выполнение "npm install --save bootstrap @ 3" и внесение следующих изменений в файл angular.json.

"styles": [
              "src/styles.css",
              "../node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "../node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Примечание -Для справки перейдите по ссылке ссылка .Вы можете увидеть раскрывающееся демо.