Question

我正在使用CLI创建角度为2的应用程序，我的应用程序模块太长了所以现在我要创建子模块

我的子模块是

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { ProjectComponent } from './project.component';
import { ProjectListingComponent } from './project-listing/project-listing.component';
import { ProjectCreateUpdateComponent } from './project-create-update/project-create-update.component';


// routing set for project module 

const routes: Routes = [
    {path:'project/add' , component:ProjectCreateUpdateComponent},
    {path:'project/:id/edit' , component:ProjectCreateUpdateComponent},
    {path:'project-listing' ,component:ProjectListingComponent},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})
export class ProjectRoutingModule { }


// Main module for project 
@NgModule({
  imports: [
    CommonModule,
    ProjectRoutingModule
  ],
  declarations: [ProjectComponent, ProjectListingComponent, ProjectCreateUpdateComponent ]
})
export class ProjectModule { }

＆GT;主要模块是

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DatePipe } from '@angular/common';
//import { ViewContainerRef} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from './app.routing';
import { ReactiveFormsModule } from '@angular/forms';

import { MaterialModule } from '@angular/material';

//custom modules 
import {ProjectModule} from './project_module/project.module';   

import { HomeComponent } from './home/home.component';  
...
@NgModule({
  declarations: [
    AppComponent,
    GradeComponent,
    GradeListingComponent,
    HomeComponent,
    GradeComponent,
    ...

  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,       
    MaterialModule.forRoot(),
    ReactiveFormsModule,        
    ProjectModule   

  ],
  providers: [
    NotificationsService,
    DatePipe,
    GradeService,
    ...        
    ],
    exports: [
        ConfirmDialogComponent,
    ],
  entryComponents: [
    logsShow
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

但问题是我的子模块无法访问材料模块值   以及我在app.module中使用的其他模块/插件..

获得此方法的方法是什么..还面临路由问题

Answer 1

这是完全正常的。如果您想从子模块访问MaterialModule，则必须在此子模块中声明MaterialModule。

这对你所有的共享模块来说都很蹩脚......

解决此问题的基本方法是创建SharedModule，导入/导出您要在整个应用中使用的所有内容。

例如，这是我当前项目的shared.module.ts文件：

export const modules = [
  CommonModule,
  ReactiveFormsModule,
  HttpModule,
  RouterModule,
  MaterialModule,
  FlexLayoutModule,
  StoreModule,
  StoreDevtoolsModule,
  TranslateModule,
  PrettyJsonModule,
  SimpleNotificationsModule
];

export const declarations = [GenerateIconComponent, ColorSearchedLettersDirective];

@NgModule({
  imports: modules,
  exports: [...modules, ...declarations],
  declarations
})
export class SharedModule { }

然后我只需将其导入每个子模块。

您也应该查看官方文档：

https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

如何使用Angular cli创建子模块

1 个答案: