Angular2多个组件不同的导入

Question

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

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

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

我想也许我必须在app.module 中声明另一个NgModule 或创建一个单独的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 {

}

Answer 1

听起来MainViewModule、DasboardViewModule 和LoginViewModule 是功能模块，所以我可能会将其结构如下：

• AppModule

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

• 然后在 `app.routing' 中，您可以根据需要延迟加载那些 'view' 模块。

..

 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 { }

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

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