Angular 2多个模块

我有一个应用程序有多个视图,如一个是电子表格和另一个是双面板视图,用于两个视图导航,搜索和过滤器很常见.所以我添加了一个通用模块并将该模块导入主模块&现在尝试在电子表格组件中使用通用模块组件.以下是我的代码,将提供正确的图片：

// Spreadsheet module - spreadsheet.module.ts
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { Spreadsheet } from './components/spreadsheet.component';

@NgModule({
  imports: [ BrowserModule ],declarations: [ Spreadsheet ],schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class SpreadsheetModule { }

// Common module - common.module.ts
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { TopNavigation } from './components/header.component';
import { Search } from './components/search.component';
import { AccountInfo } from './services/accountInfo';

@NgModule({
  imports: [ BrowserModule ],declarations: [ TopNavigation,Search ],providers: [ AccountInfo ],schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class CommonModule {}

现在我将这个模块导入一个主模块,它是：

// App module - app.module.ts
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CommonModule } from './common/common.module';
import { SpreadsheetModule } from './spreadsheet/spreadsheet.module';

@NgModule({
  imports: [ BrowserModule,CommonModule,SpreadsheetModule ],declarations: [ AppComponent ],schemas: [ CUSTOM_ELEMENTS_SCHEMA ],bootstrap: [ AppComponent ]
})
export class AppModule { }

所以在我的电子表格组件中,我正在尝试使用标题(TopNavigation)模板,例如< top-nav>< / top-nav>所以这应该显示header.html内容,但它将显示为空白.它也没有给出任何错误.不确定我做错了什么.

注意：如果我在spreadsheet.module.ts中直接声明TopNavigation,它可以正常工作.但由于导航和搜索很常见,我不想在应该只在app.module.ts中的每个模块中声明它.

这里有两件事需要做：

首先,出口TopNavigation&从CommonModule中搜索组件,以便可以在其他模块中使用它们：

// Common module - common.module.ts
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { TopNavigation } from './components/header.component';
import { Search } from './components/search.component';

@NgModule({
  imports: [ BrowserModule ],exports: [ TopNavigation,schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class CommonModule {}

其次,CommonModule应该由实际使用它的Module导入.在您的情况下,SpreadSheet模块应导入CommonModule

// Spreadsheet module - spreadsheet.module.ts
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { Spreadsheet } from './components/spreadsheet.component';
import { CommonModule } from './common/common.module';

@NgModule({
  imports: [ BrowserModule,CommonModule],schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class SpreadsheetModule { }

模块不继承组件在其他模块中声明.因此,当您在AppModule中导入CommonModule时,它没有任何效果.

您可以阅读here了解更多信息.

原文链接：https://www.f2er.com/angularjs/140299.html

猜你在找的Angularjs相关文章