bootstrap dropdown «open» event in angular 2

Question

Я пытаюсь создать директиву, которая открывает выпадающий список бутстрапов при нажатии и закрывает его, когда мышь уходит. код директивы выпадающий:

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

@Directive({ 
    selector: '[rbDropdown]' 
}) 
export class DropdownDirective { 
    @HostBinding('class.open') get opened() { 
    return this.isOpen; 
    } 
    @HostListener('click') open(){ 
    this.isOpen = true; 
    } 
    @HostListener('mouseleave') close(){ 
    this.isOpen = false; 
    } 

    private isOpen = false; 

} 

Затем в пункте выпадающий Ли, я использую эту директиву:

<li class="dropdown" rbdropdown> 
    <a href="#" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">User <span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
    <li><a href="#">Login</a></li> 
    <li><a href="#">Otg=her</a></li> 
    <li role="separator" class="divider"></li> 
    <li><a href="#">Logout</a></li> 
    </ul> 
</li> 

Но это не работает ...

Answer 1

Хорошо, глупая проблема .. . IDE изменила название директивы в элементе li, и я этого не заметил