Question

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

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

所以我构建了我的blank.component并将其导入app.module，但我仍在导入app.module中我不想要的3个视图模块，否则他们不会完全导入（对于＆＃34;空白＆＃34;页面，或＆＃34;其他＆＃34;页面）。

我想也许我必须在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 {

}

Answer 1

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

AppModule
HomeModule - 我在单个模块中定义了导航，topnavbar和页脚组件，然后将其导入AppModule。如果你愿意，你可以保留3个单独的模块，但我不确定你从中获得了什么。
然后在'app.routing＆＃39;你可以懒得加载那些查看＆＃39;模块根据需要。

...

 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中定义）将是使用top-nav / footer组件并提供router-outlet的唯一位置，其中＆＃39; view＆＃39;会显示。像这样：

<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的消费者不需要记住每次导入它们。

不确定这是否与您的想法完全相同，但希望它有所帮助！

Angular2多个组件不同的导入

1 个答案: