Question

我要将我对angular2的知识从版本 Rc5 升级到 2.2 。我的指令属性有问题，因为我升级了我的包已被弃用。我知道它转移到NgModule装饰器上的导入属性但它调用共享组件但是当我有非常大量的组件，我必须从每个组件的指令移动到我的应用程序在NgModule的起点，因此我的所有组件必须在开始时加载，我不知道是否有办法将指令带回组件延迟加载其他组件中的组件。

Answer 1

正如我的朋友所说，以角度为单位嵌套组件已被弃用，而不是模块加载。这是我如何以我的方式实现这一点：首先，我发现我们可以懒得加载一个带有新路由器的模块，所以我模块化我的应用程序区域并更改我的主模块

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {homeComponent} from './appComponent/homeComponent.Component'
import { AppComponent }  from './appComponent/app.component';
import {RouterModule} from '@angular/router'

@NgModule({
  imports:      [ BrowserModule,
    RouterModule.forRoot([
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: homeComponent },
      { path: 'lazy1', loadChildren: './dist/app/detailComponent/detailModule.Module#detailModule' }

    ], {})
  ],
  declarations: [ AppComponent,homeComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

最后一个根路由显示我们如何设置模块而不是导入的Component，然后我们在第二个模块中配置子路由并按以下方式操作：

import { NgModule }      from '@angular/core';
import { DetailComponent } from '../detailComponent/detail.component'
import { RouterModule, Route, Router} from '@angular/router';

@NgModule({
  imports:[ RouterModule.forChild([ {path: '', component: DetailComponent}])],
  declarations: [ DetailComponent ]
})
export class detailModule { }

正如此代码所示，我们可以配置我们的第二级模块来加载其组件并使用它来减少网络负载（使用systemjs）并在用户单击菜单链接时加载它。请注意，我们可以继续将模块嵌套在第二级模块路由配置

中

此外，我们可以使用名为SystemJsNgModuleLoader

的内置角度类加载模块及其组件

angular2中的嵌套组件

1 个答案: