AngularJS 2 ausgefallene Eigenschaft binden

Question

Ich habe eine generische "menubar" Komponente innerhalb seiner eigenen Modul:

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

mit dieser Vorlage:

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

ich dann die wichtigsten app Komponenten hat:

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

mit der folgenden Vorlage:

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

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

Die app.module importiert das menubar Modul:

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

} 

und die MenuComponent wird durch die MenuModule erklärt:

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

Wenn ich die menubar Richtlinie auf Kommentar, um den Rest der app funktioniert gut (ohne das Menü natürlich). Sobald ich die menubar Richtlinie Kommentar-, erhalte ich die folgende Fehlermeldung in der Chrome-Konsole:

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 

Ich verstehe nicht, warum es nicht die menubar Komponente zu sehen.

Answer 1

Das Problem ist, dass eine Erklärung nicht automatisch Export der Fall ist, wie viele der Tutorials bedeuten.

die MenuModule dazu ändern:

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

das Problem behoben.