AngularJS 2無法綁定屬性

Question

我有它自己的模塊內部通用的「菜單欄」組件：

@Component({ 
    selector: 'menubar', 
    templateUrl: './menu.component.html', 
}) 
export class MenuComponent { 
    @Input('items') menuItems: string[]; 
} 

與此模板：

<ul class="menu"> 
    <li class="menuItem" *ngFor="let menuItem of menuItems"> 
     {{ menuItem }} 
    </li> 
</ul> 

我再有主要的應用程序組件：

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = "Sitename"; 
    menuItems = [ 
    'Home', 
    'Training' 
    ]; 
} 

使用以下模板：

<div> 
    <h1>{{ title }}</h1> 
</div> 
<menubar [items]="menuItems"></menubar> 

<div id="contentView"> 
    <router-outlet></router-outlet> 
</div> 

的app.module導入菜單欄模塊：

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    HomeModule, 
    TrainingModule, 
    MenuModule, 
    SharedModule, 
    AppRouting.forRoot() 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 

} 

和MenuComponent中由MenuModule聲明：

@NgModule({ 
    imports: [ 
     SharedModule 
    ], 
    declarations: [ 
     MenuComponent 
    ]  
}) 
export class MenuModule { } 

如果我註釋掉的菜單欄指令，應用程序的其它部分工作正常（當然沒有菜單）。只要我去掉菜單欄的指令，我得在Chrome控制檯以下錯誤：

zone.js:405Unhandled Promise rejection: Template parse errors: 
Can't bind to 'items' since it isn't a known property of 'menubar'. (" 
    <h1>{{ title }}</h1> 
</div> 
<menubar [ERROR ->][items]="menuItems"></menubar> 

<div id="contentView"> 
"): AppComponent@3:9 
    'menubar' is not a known element: 
1. If 'menubar' is an Angular component, then verify that it is part of this module. 
2. If 'menubar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" 
    <h1>{{ title }}</h1> 
</div> 
[ERROR ->]<menubar [items]="menuItems"></menubar> 

<div id="contentView"> 
"): AppComponent@3:0 ; Zone: <root> ; Task: Promise.then ; Value:   SyntaxError {_nativeError: Error: Template parse errors: 
Can't bind to 'items' since it isn't a known property of 'menubar'. ("…} Error: Template parse errors: 
Can't bind to 'items' since it isn't a known property of 'menubar'. (" 
    <h1>{{ title }}</h1> 
</div> 
<menubar [ERROR ->][items]="menuItems"></menubar> 

<div id="contentView"> 
"): AppComponent@3:9 
'menubar' is not a known element: 
1. If 'menubar' is an Angular component, then verify that it is part of this module. 
2. If 'menubar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" 
    <h1>{{ title }}</h1> 
</div> 
[ERROR ->]<menubar [items]="menuItems"></menubar> 

<div id="contentView"> 
"): AppComponent@3:0 

我不明白爲什麼它沒有看到菜單欄的組成部分。

Answer 1

問題是宣言不會像許多教程所暗示的那樣自動導出。

修改MenuModule這樣：

@NgModule({ 
    imports: [ 
     SharedModule 
    ], 
    declarations: [ 
     MenubarComponent 
    ], 
    exports: [ 
     MenubarComponent 
    ] 
}) 
export class MenubarModule { } 

固定的問題。