Angular2子模块导入问题

debugcn 发表于 Dev

马塞尔

我在使用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>

波尔·克鲁伊特

您应该将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 {}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。