AngularJS 2 не удалось связать свойству

Question

У меня есть общий "Menubar" компонент внутри его собственной модуля:

@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 импортирует модуль Menubar:

@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 { } 

Если я закомментировать директиву Menubar, остальные приложения отлично работает (без меню, конечно). Как только я раскомментировать директиву Menubar, я получаю следующее сообщение об ошибке в консоли 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 

Я не понимаю, почему он не видит компонент MenuBar.

Answer 1

Проблема заключается в том, что декларация автоматически не экспортируется, как подразумевается в большинстве учебных пособий.

Изменение MenuModule к этому:

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

исправили проблему.