Kann nicht an das Dropdown-Menü binden, da es eine bekannte native Eigenschaft ist

Question

Hallo Ich habe gerade eine neue eckige Anwendung gestartet und ich habe ein Problem beim Importieren einer Direktive. Hier ist mein Code:

Dies ist meine Bootstrap-Datei:

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import {CommercifyComponent} from './commercify.component'; 

bootstrap(CommercifyComponent); 

Dies ist meine Stammkomponente:

import { Component } from '@angular/core'; 
import { LeftNavigationComponent } from './navigation/components/left-navigation.component'; 
import { TopNavigationComponent } from './navigation/components/top-navigation.component'; 

@Component({   
    moduleId: module.id, 
    selector: 'commercify', 
    templateUrl: 'commercify.view.html', 
    styleUrls: ['commercify.style.css'], 
    directives: [LeftNavigationComponent, TopNavigationComponent] 
})   
export class CommercifyComponent { 
    private ceva = "iom"; 
} 

Dies ist LeftNavigationComponent:

import { Component } from '@angular/core'; 
import { DropdownDirective } from './../directives/dropdown.directive'; 

    @Component({ 
     moduleId: module.id, 
     selector: 'left-navigation', 
     styleUrls: ['left-navigation.style.css'], 
     templateUrl: 'left-navigation.view.html', 
     directives: [DropdownDirective] 
    }) 
    export class LeftNavigationComponent { 
     private ceva = "iom"; 
    } 

und die linke Navigationskomponentenansicht:

<li class="nav-item" [dropdown]> 
     <div class="nav-item-header nav-item-header-active"> 
      <span class="nav-item-icon glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 
      <span class="nav-item-text">Catalog</span> 
      <span class="nav-item-arrow glyphicon glyphicon-menu-right"></span> 
     </div> 
     <ul class="nav-item-content nav-item-content-active list-unstyled"> 
      <li class="nav-child-item"> 
       <span class="nav-item-icon glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 
       <span class="nav-item-text">Categories</span> 
      </li> 
      <li class="nav-child-item"> 
       <span class="nav-item-icon glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 
       <span class="nav-item-text">Templates</span> 
      </li> 
      <li class="nav-child-item"> 
       <span class="nav-item-icon glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 
       <span class="nav-item-text">Products</span> 
      </li> 
     </ul> 
    </li> 

Und schließlich ist dies die DropdownDirective:

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

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

    public element: HTMLElement; 

    constructor(element: ElementRef) { 
     this.element = element.nativeElement; 
    } 
} 

Wenn ich den Code ausführen bekomme ich diesen Fehler:

Jetzt tought ich diesen Fehler displyed wurde, weil ich hinzufügen benötigt die Anweisung in LeftNavigationComponent, aber ich habe das getan. Ich benutze angular rc.4.

Wer weiß, was los ist?

Answer 1

Genau dies tun

<li class="nav-item" dropdown> 

statt dessen

<li class="nav-item" [dropdown]>