bootstrap 4 Angulaire 2 déroulant ne fonctionne pas

Variation sur @VictorLuchian pour nouveau BS4 bêta, il semble "show" de la classe doivent être ajoutés sur la liste déroulante du menu ainsi.
Cette version inclut un clic à l'extérieur de la fermer au lieu de mouseout

import { Directive,HostListener,HostBinding, ElementRef } from '@angular/core'; 
@Directive({
  selector: '[customdropdown]'
})
export class CustomDropdownDirective {

private isOpen: boolean =false;
constructor(private _el: ElementRef) { 

}

@HostBinding('class.show') get opened() {
    return this.isOpen;
}
@HostListener('click') open() {
    this.isOpen = true;
    this._el.nativeElement.querySelector('.dropdown-menu').classList.add('show')                
}
@HostListener('document:click', ['$event.target']) close (targetElement) {
    let inside: boolean = this._el.nativeElement.contains(targetElement);
    if(!inside) {
        this.isOpen = false;
        this._el.nativeElement.querySelector('.dropdown-menu').classList.remove('show')
    }
}
}

Comme Andrien est dit, vous pouvez simplifier le code comme ceci.

constructor(private _el: ElementRef) { }
        @HostBinding('class.show') isOpen = false;
        @HostListener('click') toogleOpen() {
            this.isOpen = !this.isOpen;
            this._el.nativeElement.querySelector('.dropdown-menu').classList.toggle('show')
        }

Exemple De Code StackBliz Lien

Tout d'abord Bootstrap 3 & 4 Déroulant état actif classes sont différentes

1. Dans Bootstrap 3 : Dans la liste déroulante état ouvert; .dropdown-toggle parent de l'élément est ajouté 'ouvrir' classe CSS

2. Où, comme dans le Bootstrap 4 faire usage de "montrer" classe CSS
   Dans la liste déroulante de l'état ouvert. Ici .dropdown-toggle élément parent et frère suivant l'élément avec la classe CSS .dropdown-menu sont ajoutés "montrer" Classe css

Donc de faire de bootstrap 4 déroulante de travail angulaire 4 nous permettra de créer de nouveaux angulaire de la directive de la classe et de l'ajouter à bootstrap déroulant dans angulaire modèle

Étape 1 - créer de nouvelles angulaire de la directive ng-bootstrap-liste.la directive.ts

import { Directive, HostListener, ElementRef } from '@angular/core';
@Directive({
selector: '[appNgBoostrapDropdown]'
})
export class NgBoostrapDropdownDirective {
private isShow: boolean = false;
private dropdownParentEl = this.elementRef.nativeElement.closest('.dropdown');
constructor(private elementRef: ElementRef) { }
@HostListener('click') open() {
this.isShow = !this.isShow;
if (this.isShow) {
this.dropdownParentEl.classList.add('show');
this.dropdownParentEl.querySelector(".dropdown-menu").classList.add('show');
} else {
this.dropdownParentEl.classList.remove('show');
this.dropdownParentEl.querySelector(".dropdown-menu").classList.remove('show');
}
}
@HostListener('document:click', ['$event'])
clickout(event) {
if (this.elementRef.nativeElement.contains(event.target) && this.isShow) {
this.dropdownParentEl.classList.add('show');
this.dropdownParentEl.querySelector(".dropdown-menu").classList.add('show');
} else {
this.dropdownParentEl.classList.remove('show');
this.dropdownParentEl.querySelector(".dropdown-menu").classList.remove('show');
this.isShow = false;
}
}
}

Étape 2 : Importer de la présente Directive en application.le module.ts

import { NgBoostrapDropdownDirective } from './directives/ng-boostrap-dropdown.directive';
@NgModule({
declarations: [ AppComponent, NgBoostrapDropdownDirective ],
})

Étape 3 : Appliquer la directive dans le Modèle à l'aide de appNgBoostrapDropdown

NAVIGATION : 
<li class="nav-item dropdown" >
<a class="nav-link dropdown-toggle" appNgBoostrapDropdown  href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<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>
BUTTON DROPDOWN : 
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" appNgBoostrapDropdown type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</div>

Exemple De Code StackBliz Lien

Le CSS doit être dans le <head></head> tag.

Je cite de bootstrap

Copier-coller la feuille de style <link> dans votre <head> avant tous les autres
les feuilles de style pour charger notre feuille de style CSS.

Je continue en citant

Ajouter nos plugins JavaScript, jQuery, et d'Attache à la fin de votre
pages, juste avant la balise de fermeture. Assurez-vous de placer jQuery
et son Attache tout d'abord, que notre code en dépend.

Assurez-vous que vous avez de cette façon
voici le lien pour l'amorçage de la documentation où je reçois ce cite
https://v4-alpha.getbootstrap.com/getting-started/introduction/

et vérifier cette réponse dans le post que vous partagez le lien
https://stackoverflow.com/a/39809447/3284537

j'ai utilisé une approche différente pour se déroulant sur collpased navbar.

ÉTAPE 1
Ajouter un événement de clic sur la barre de navigation bouton bascule

<button type="button" class="navbar-toggle" data-toggle="collapse" (click)="OnClik()" data-target="#myNavbar"

Html

    <nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" (click)="OnClik()" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse " [ngClass]="{'show': buttontoggled}" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>

Etape 2:
mettre en œuvre la fonction à l'intérieur de
Navbar composant.ts (ci-Dessus navbar modèle html est utilisé à l'intérieur de barre de navigation composant)

import { Component} from '@angular/core';
export class HeaderComponent  {
buttontoggled:boolean:false;
OnClik(){
this.buttontoggled=!this.buttontoggled;
}

Étape 3
basé sur la barre de navigation bouton bascule cliquez sur ajouter une classe montrer(bootstrap 4) ou open pour les précédentes bootstrap versions.
nous pouvons utiliser ngClass Directive pour ce

 <div class="collapse navbar-collapse " [ngClass]="{'show': buttontoggled}" id="myNavbar">

Flux de travail

Barre de navigation bouton bascule sera visible lors de la barre de navigation de geting s'est effondré pour les petites résolutions

par la manipulation de l'événement click du bouton, nous pouvons définir un indicateur pour vérifier si le bouton est cliqué ou pas

Basée sur cet indicateur nous permettra de
nous allons lier la classe css montrer à navabr div à l'aide de ngClass directive

navbar.component.html

<li class="nav-item dropdown show" appDropdown>
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a routerLink="yourLInk1" class="dropdown-item">Item 1</a>
<a routerLink="yourLInk2" class="dropdown-item">Item 2</a>
<a routerLink="yourLInk3" class="dropdown-item">Item 3</a>
<a routerLink="yourLInk4" class="dropdown-item">Item 4</a>
<div class="dropdown-divider"></div>
<a routerLink="yourLInk5" class="dropdown-item">Item 5</a>
</div>
</li>

liste déroulante.la directive.ts

import { Directive, HostBinding, HostListener, ElementRef } from '@angular/core';
@Directive({
selector: '[appDropdown]'
})
export class DropdownDirective {
constructor(private elementRef: ElementRef) { }
private dropdownParentEl = this.elementRef.nativeElement.closest('.dropdown');
@HostListener('mouseenter') toggleOpen(){
this.dropdownParentEl.querySelector(".dropdown-menu").classList.add('show');
}
@HostListener('mouseleave') toggleClose(){
this.dropdownParentEl.querySelector(".dropdown-menu").classList.remove('show');
}
@HostListener('click') toogleOpen() {
this.dropdownParentEl.querySelector(".dropdown-menu").classList.toggle('show');
}
}

Angulaire 8 et Bootstrap 4.2 c'est la solution de travail je suis à l'aide d' :

1 - tout d'Abord j'ai créé une coutume de la directive. Ce qu'il fait est d'écouter le clic de l'événement de la liste déroulante contenant et basculer le .la classe d'exposition de la .dropdown-menu de l'élément (Bootstrap 4 norme de comportement). Aussi, il va fermer le menu déroulant si il y a un clic partout ailleurs sur le document.

import {Directive, ElementRef, HostBinding, HostListener, OnInit} from '@angular/core';
@Directive({
selector: '[appDropdown]'
})
export class DropdownDirective implements OnInit {
dropDownMenu: HTMLElement;
@HostListener('document:click', ['$event']) toggleOpen(event: Event) {
if ( this.dropDownButton.nativeElement.contains(event.target) ) {
this.dropDownMenu.classList.toggle('show');
} else {
this.dropDownMenu.classList.remove('show');
}
}
constructor(private dropDownButton: ElementRef) { }
ngOnInit(): void {
this.dropDownMenu = this.dropDownButton.nativeElement.querySelector('.dropdown-menu');
}
}

2 - une Fois que votre directive est créé et enregistré. Assurez-vous d'appliquer la directive à la liste déroulante de l'élément, comme sur cet exemple:

<div class="btn-group" appDropdown>
<button type="button" class="btn btn-primary dropdown-toggle">Dropdown menu<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">Item One</a></li>
<li class="dropdown-item"><a href="#">Item Two</a></li>
<li class="dropdown-item"><a href="#">Item Three</a></li>
</ul>
</div>