Question

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

标题模块：

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

您应该导入CommonModule内的HeaderModule。此模块包含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 {}

Angular2子模块导入问题

1 个答案: