angular2中的嵌套组件

Question

我打算将我对 angular2 的知识从版本 Rc5 升级到 2.2。我对指令属性有疑问，自从我升级我的 packages.I 后，它就被弃用了，知道它在 NgModule 装饰器上移动到 imports 属性但它调用了 Shared Components 但是当我有大量组件时，我必须从每个组件上的指令移动到我的应用程序在 NgModule 的起点，因此我的所有组件都必须在开始时加载，我不知道是否有办法将指令带回组件以延迟加载其他组件中的组件。

Answer 1

正如我的朋友所说，在 angular 中嵌套组件已被弃用，取而代之的是模块加载。以下是我如何以我的方式实现它：首先，我发现我们可以用新路由器延迟加载模块，所以我模块化了我的应用程序的区域并更改了我的主模块

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

最后一个根路由显示了我们如何分配一个模块而不是导入的组件，然后我们在第二个模块中配置我们的子路由并像这样：

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

的内置 angular class 加载模块及其组件

angular2中的嵌套组件

nested Components in angular2

web

single-page-application

angular2-components

angular