0

我对 Angular2 很陌生，我正在尝试修改模板。基本上，默认情况下，所有视图都嵌套在带有 Header、Footer 和 TopNavbarModule 的模板中。

我试图避免为某些视图组件导入这些模块。

所以我已经构建blank.component并导入了它，app.module但我仍在导入我不想要的 3 个视图模块app.module，否则它们根本不会被导入（“空白”页面或“其他”页面都不会）。

我认为也许我必须在其中声明另一个NgModule或app.module创建一个单独的blank.module - 有什么想法吗？

的定义app.module

import {NgModule} from '@angular/core'
import {RouterModule} from "@angular/router";
import {AppComponent} from "./app.component";
import {BlankComponent} from "./blank.component";
import {BrowserModule} from "@angular/platform-browser";
import {HttpModule} from "@angular/http";
import {ROUTES} from "./app.routes";
import {LocationStrategy, HashLocationStrategy} from '@angular/common';

// App views
import {MainViewModule} from "../views/main-view/main-view.module";
import {DashboardViewModule} from "../views/dashboard-view/dashboard-view.module";

// App modules/components
import {NavigationModule} from "../views/common/navigation/navigation.module";
import {FooterModule} from "../views/common/footer/footer.module";
import {TopnavbarModule} from "../views/common/topnavbar/topnavbar.module";
import {LoginViewModule} from "../views/login-view/login-view.module";

@NgModule({
    declarations: [AppComponent, BlankComponent],
    imports     : [

        // Angular modules
        BrowserModule,
        HttpModule,

        // Views
        MainViewModule,
        DashboardViewModule,
        LoginViewModule,

        // Modules
        NavigationModule,
        FooterModule,
        TopnavbarModule,

        RouterModule.forRoot(ROUTES)
    ],
    providers   : [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap   : [AppComponent]
})

export class AppModule {}

的定义blank.component

import {Component} from '@angular/core';
import { correctHeight, detectBody } from './app.helpers';

// Core vendor styles
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../../node_modules/font-awesome/css/font-awesome.css'
import '../../node_modules/animate.css/animate.min.css'

// Main Inspinia CSS files
import '../../src/assets/styles/style.css'

declare var jQuery:any;

@Component({
    selector   : 'blank',
    templateUrl: 'blank.template.html',
})

export class BlankComponent {

}
4

1 回答 1

0

这听起来像MainViewModule,DasboardViewModule并且LoginViewModule是功能模块，所以我可能会像下面这样构造它：

  • AppModule

  • HomeModule- 我将导航、顶部导航栏和页脚组件都定义在一个模块中，然后将其导入到AppModule. 如果您愿意，您可以保留 3 个单独的模块，但我不确定您从中获得了什么。

  • 然后在“app.routing”中，您可以根据需要延迟加载那些“视图”模块。

..

 const appRoute: Routes = [
       path: '',
       component: BlankComponent,
       children: [
         { 
            path: 'main',
            loadChildren: 'app/views/main-view/main-view.module#MainViewModule'
         },
         { 
            path: 'login',
            loadChildren: 'app/views/login-view/login-view.module#LoginViewModule'
         }
         { 
            path: 'dashboard',
            loadChildren: 'app/views/dashboard-view/dashboard-view.module#DashboardViewModule'
         }
       ]
]

BlankComponent 的模板（在 app.module 中定义）将是唯一使用顶部导航/页脚组件并提供router-outlet“视图”显示位置的地方。像这样的东西：

<app-top-nav></app-top-nav> <router-outlet></router-outlet> <app-footer></app-footer>

AppModule进口量很小：

@NgModule({
  imports: [
    //Angular modules
    BrowserModule,
    HttpModule,
    CoreModule, //your module containing services (see module guidance)
    SharedModule, //your modules with commons pipes, directives etc (see module guidance)
    HomeModule, //your module contains the navbar, footer etc
    routing
  ],
  providers: [
    appRoutingProviders,
  ],
  declarations: [AppComponent, BlankComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

SharedModule只有在使用通用组件以及任何 Angular 模块依赖项时，功能（视图）模块才会导入。我通常会SharedModule重新导出常见的 Angular 依赖项，例如表单模块，这样消费者SharedModule就不需要记住每次都导入这些依赖项。

不确定这是否正是您的想法，但希望它有所帮助！

于 2017-03-23T00:52:45.383 回答