Раскрывающийся список Bootstrap 4 не работает в Angular 6 - PullRequest
Новая
       111

Раскрывающийся список Bootstrap 4 не работает в Angular 6

0 голосов
/ 04 октября 2018

Я написал директиву для достижения функции выпадающего меню для кнопки.Он работает с Bootstrap 3, но не с Bootstrap 4.

Вот код HTML: 

<div class="row">
  <div class="col-xs-12">
    <div class="btn-group" appDropdown>
      <button class="btn btn-primary dropdown-toggle"
      >Dropdown Menu<span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a>items1</a></li>
        <li><a>items2</a></li>
      </ul>
    </div>
  </div>
</div>

Вот код в файле директивы: 

import {Directive, HostBinding, HostListener} from '@angular/core';

@Directive ({
  selector: '[appDropdown]'
})
export class DropdownDirective {
  @HostBinding('class.open') isOpen = false;
  @HostListener('click') toggleOpen() {
    this.isOpen = !this.isOpen;
  }
}

1 Ответ

0 голосов
/ 04 октября 2018

Если вы не возражаете против использования ngx-bootstrap , вы можете сделать что-то подобное.

Список зависимостей, которые вам понадобятся,

bootstrap, jquery, ngx-bootstrap & popper.js

Sample

enter image description here

app.component.html 

<div class="btn-group" dropdown>
<button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
        aria-controls="dropdown-basic">
  Button dropdown <span class="caret"></span>
</button>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
    role="menu" aria-labelledby="button-basic">
  <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
  <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
  <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
  <li class="divider dropdown-divider"></li>
  <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
  </li>
</ul>

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 { BsDropdownModule } from 'ngx-bootstrap/dropdown';

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

package.json (только извлечение зависимостей) 

"dependencies": {
    "@angular/common": "^6.1.9",
    "@angular/compiler": "^6.1.9",
    "@angular/core": "^6.1.9",
    "@angular/forms": "^6.1.9",
    "@angular/platform-browser": "^6.1.9",
    "@angular/platform-browser-dynamic": "^6.1.9",
    "@angular/router": "^6.1.9",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.7",
    "jquery": "1.9.1 - 3",
    "ngx-bootstrap": "^3.0.1",
    "popper.js": "^1.14.3",
    "rxjs": "^6.3.3",
    "zone.js": "^0.8.26"
}

angular.json (извлеченные стили и скрипты) 

"projects": {
    "demo": {      
      "architect": {
        "build": {          
          "options": {            
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",              
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/bootstrap/dist/js/bootstrap.js"
            ]
          }
        }
    }
  }
}

Ссылка на StackBlitz

https://stackblitz.com/edit/angular6-bootstrap4-dropdown

Надеюсь, это поможет.Спасибо.

...