Importieren von Bootstrap 4 bis Angular CLI App

Question

I Bootstrap 4 collapse Methode aus dem Inneren der navbar Komponente in meinem Angular 4 App zu verwenden, ich versuche erstellt Angular CLI verwenden.

Die Frage ist, wie folgt. Ich importiere jquery und Bootstrap mit diesem Code:

import * as $ from 'jquery'; 
import 'bootstrap'; 

Und dann diese Event-Handler haben die navbar zu kollabieren, wenn Link in darauf geklickt wird:

$('#navbarToggleArea .nav-link').on('click', function() { 
    $('#navbarToggleArea').collapse('hide'); 
}); 

-Code erfolgreich ng serve oder ng build Befehle zusammengestellt, scheitert aber zur Laufzeit, als wäre das Bootstrap-Plugin nicht zu jQuery hinzugefügt worden. Wenn collapse Funktion wird der Fehler aufgerufen wird geworfen:

vendor.bundle.js:60854 ERROR TypeError: WEBPACK_IMPORTED_MODULE_1_jquery(...).collapse is not a function

Meine Frage ist: Was und wie soll ich diesen Fehler zu beseitigen konfigurieren?

Der Code ist here und die betreffende Komponente ist here.

Answer 1

Kollabieren zu erreichen, verwenden Winkel:

<div class="navbar-collapse collapse" [class.in]='collapsed'> 

auf der 'Humburger'

<span [class.open]="collapsed" id="humburger" (click)="collapsed=!collapsed"> 

in der Klasse:

collapse:boolean;

Answer 2

Angular Weg, dies in meiner Seite myPage

Bootstrap Navbar

<nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-fixed-top"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" 
      aria-label="Toggle navigation" (click)="isActive = !isActive"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <div class="collapse navbar-collapse" id="navbarNavDropdown" [ngClass] = "{show : isActive}"> // ngClass used here 
    <ul class="navbar-nav"> 
     <li class="nav-item dropdown [routerLinkActive]="['active']" appDropdown"> // directive used here 
     <a class="nav-link dropdown-toggle" href="http://example.com" 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> 

appDropdown Richtlinie

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

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

    private isOpen:boolean = false; 

    @HostBinding('class.open') get opened(){ 
     return this.isOpen; 
    } 
    constructor() { } 

    @HostListener('click')open(){ 
     this.isOpen = true; 
    } 

    @HostListener('mouseleave')close(){ 
     this.isOpen = false; 
    } 
    }