无法绑定到下拉列表,因为它是已知的本机属性

时间:2016-07-30 08:43:07

标签: angular

您好我刚开始使用新的角度应用程序,导入指令时遇到问题。这是我的代码:

这是我的引导程序文件:

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

bootstrap(CommercifyComponent); 

这是我的根组成部分:

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";
}  

这是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";
    }

左侧导航组件视图:

    <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> 

最后这是DropdownDirective:

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

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

    public element: HTMLElement;

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

当我运行代码时,我收到此错误:

enter image description here

现在我认为这个错误是显而易见的,因为我需要在LeftNavigationComponent中添加指令,但我这样做了。我正在使用角度rc.4。

任何人都知道出了什么问题?

1 个答案:

答案 0 :(得分:1)

就这样做

<li class="nav-item" dropdown>

而不是

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