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

解决了这个问题。

AngularJS 2无法绑定属性

1 个答案: