Angular中的多个布局+延迟加载

Question

我已经处理了几个Angular应用程序，但所有这些应用程序都使用了一个布局。

我现在将使用AngularJS + UI-Router构建的应用程序转换为Angular 5.使用AngularJS + UI-Router很容易让“主页”独立于您的路线，但我不会立即看到我如何轻松复制这与Angular 5路由器。

另外，我想保留使用延迟加载的可能性。

我希望实现的一个例子：

"/" application root
"/routeA" -> lazily loaded module
"/routeA/routeA01" -> default layout with header, footer, sidebar
"/routeA/routeA02" -> alternate layout with completely different html as used in route above

Answer 1

是的，这是可能的。

你需要一个父模块，我们称之为Pages模块。它可以有一个包含主页面布局的Pages组件：

pages.component.ts
pages.component.html

页面html模板就是这样，所以你真的不需要一个单独的文件，你可以在ts文件中声明它：

    <div class="main">
        <router-outlet></router-outlet>
    </div> 

此组件加载到您的页面模块中：

\ SRC \程序\ \网页pages.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PagesComponent } from './pages.component';

@NgModule({
  imports: [
    CommonModule,
    routing    
  ],
  declarations: [ 
    PagesComponent,
  ]
})
export class PagesModule { }

pages模块有一个相应的routes文件（你可以在上面的文件中声明路由）。在这个例子中，我显示了2个延迟加载的模块，routeA和routeB：

\ SRC \程序\网页\ pates.routing.ts

import { Routes, RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';    
import { PagesComponent } from './pages.component';

export const routes: Routes = [
    {
        path: '',
        component: PagesComponent,
        children: [
            { path: 'routeA', loadChildren: 'app/pages/routeA/routeA.module#RouteAModule'},
            { path: 'routeB', loadChildren: 'app/pages/routeB/routeB.module#RouteBModule'},
        ]
    }
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

最后是RouteA模块，路由声明为模块文件的一部分：

\ SRC \程序\网页\ routeA \ routeA.module.ts

import { NgModule, Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';

import { RouteA01Component } from './routeA01/routeA01.component.ts';
import { RouteA02Component } from './routeA02/routeA02.component.ts';   

export const routes = [
  { path: 'routeA01', component: RouteA01Component },
  { path: 'routeA02', component: RouteA02Component },
];

@NgModule({
  declarations: [
    RouteA01Component, 
    RouteA02Component, 
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(routes);
  ],
  providers: [
  ]
})
export class RouteAModule { }

请注意，RouteA01和RouteA02是单独的路由和可以包含完全不同的html和css的单独组件。

编辑

再次阅读你的问题我觉得它有点含糊不清，因为你说你希望RouteA01加载带有标题，菜单，侧边栏的默认布局。通常你会把它放到PagesComponent中，然后把<router-outlet>放在你希望内容不同的地方。这样，RouteA01和RouteA02都将获得相同的“默认”标题，菜单，侧边栏，但内部的主要内容将根据加载的路径和子组件而改变。

但是，如果您希望RouteA02具有完全不同的布局（即不同的标题，菜单，侧边栏），那么您可以完全按照上面的说明进行操作，并且RouteA01和RouteA02组件都会声明其不同的标题，菜单和侧边栏。

Answer 2

假设有2个功能页面

1. 一个是 - 页眉，页脚和内容在中间。
2. 另一个有 - 标题，文章，内容，但没有页脚。

功能页面将使用unamed Router Outlet <router-outlet>路由到并显示。其中包含整个网站。

布局特定路由，即辅助路由，应使用命名的路由器插座<router-outlet name="aside">完成。其中占据了整个可用屏幕房地产的一小部分。即便弹出也应该这样做！

结帐：One Hungry Mind和Auxiliary Routing Tut以便更好地理解。