Angular2 子模块导入问题

Question

我对使用 NgSemanticModule 的子模块有疑问。模块本身在没有子模块组件模板内的 NgSemantic 标记的情况下工作。尝试在我的子模块中使用 NgSemantig 组件失败。如果我在 AppComponent 模板中使用 HeaderComponent 模板，则相同的代码可以工作。如何在 Header Module 级别导入 NgSemantic Module？

头模块：

import { NgModule } from '@angular/core';
import { HeaderComponent } from "./header.component";
import { NgSemanticModule } from "ng-semantic";


@NgModule({
   declarations: [
   HeaderComponent
],
imports: [
 NgSemanticModule
],
providers: [],
exports:[
  HeaderComponent
 ]
})

export class HeaderModule { }

标题组件：

 import { Component } from '@angular/core';
 @Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent{}

标题模板：

<sm-menu title="Angular2" class="inverted teal" logo="/assets/images/semantic.png">
<a sm-item *ngFor="let item of items" [icon]="item.icon">{{item?.title}}</a>

<sm-menu class="menu right secondary">
<a sm-item href="#/elements/menu"
   image="http://semantic-ui.com/images/avatar/small/stevie.jpg">Elliot Fu</a>
<a sm-item icon="sidebar big"></a>

我的应用模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { NgSemanticModule } from "ng-semantic";
import { HeaderModule } from "./header/";

@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    NgSemanticModule,
    HeaderModule
  ],
  providers: [],
   bootstrap: [ AppComponent ]
})
export class AppModule {}

应用组件：

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: '<app-header></app-header>',
 styleUrls: ['./app.component.css'] 
 })
 export class AppComponent {}

例外：

unhandled Promise rejection: Template parse errors:
Can't bind to 'ngForOf' since it isn't a known property of 'a'. ("<sm-menu     title="Angular2" class="inverted teal" logo="/assets/images/semantic.png">
<a sm-item [ERROR ->]*ngFor="let item of items" [icon]="item.icon">   {{item?.title}}</a>

Answer 1

您应该在您的HeaderModule 中导入CommonModule。该模块包含来自angular2 的常用指令（如*ngFor）。

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HeaderComponent } from "./header.component";
import { NgSemanticModule } from "ng-semantic";


@NgModule({
   declarations: [
      HeaderComponent
   ],
   imports: [
      NgSemanticModule,
      CommonModule
   ],
   providers: [

   ],
   exports:[
       HeaderComponent
   ]
})

export class HeaderModule {}