Angular2 使用路由的多种布局答案

【问题标题】：Multiple layout for Angular2 using RoutingAngular2 使用路由的多种布局
【发布时间】：2016-08-29 06:12:49
【问题描述】：

我正在使用 Angular2 使用路由构建我的网站。

我遇到了一个问题：如何使用路由器为我的 Angular2 应用程序使用多个布局。

例如：我至少有 2 个布局，例如 Login、Signup...（1 列）和 Home、Profile...（1 个页眉、2 个列、1 个页脚）。我的index.html 代码：

<html>
    <head>
        <base href="/">
        <title>Angular 2 QuickStart</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles/main.css">

        <!-- 1. Load libraries -->
        <!-- IE required polyfills, in this exact order -->
        <script src="node_modules/es6-shim/es6-shim.min.js"></script>
        <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
        <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

        <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="node_modules/rxjs/bundles/Rx.js"></script>
        <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
        <script src="node_modules/angular2/bundles/router.dev.js"></script>

        <!-- 2. Configure SystemJS -->
        <script>
            System.config({
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            System.import('app/main')
            .then(null, console.error.bind(console));
        </script>
    </head>

    <!-- 3. Display the application -->
    <body>
        <app>Loading...</app>
    </body>
</html>

还有app.component.ts的代码：

import {Component, OnInit} from 'angular2/core';
import { Router, RouteConfig, RouteData, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'
import { AuthComponent } from './common/auth.component'
import { BlankComponent } from './common/blank.component'

@Component({
    selector: 'app',
    template:
        `
        <router-outlet></router-outlet>
        `
    ,
    directives: [
        ROUTER_DIRECTIVES,
        ],
    providers: [
        ROUTER_PROVIDERS,
        RouteData,
        AuthComponent,
        BlankComponent,
    ]
})

@RouteConfig([
    {
        path: '/',
        name: 'Login',
        data: {base: 'blank', 'login': false},
        component: BlankComponent,
        useAsDefault: true
    },{
        path: '/home',
        name: 'Home',
        data: {base: 'auth', 'login': true},
        component: AuthComponent,
    },
])

export class AppComponent implements OnInit{
    constructor(
        private _router: Router,
        private _routeData: RouteData){
    }
    ngOnInit(){
         // Some init action
    }
}

每次我去一个路线时，<route-outlet> 都会显示相应的组件，但我不想将每个组件都布局到整个应用程序结构中。

【问题讨论】：

我也面临同样的问题。你有解决办法吗？

标签： angular

【解决方案1】：

如果您不希望某些页面的布局，您可以定义一个布局组件，只有没有其他内容。

import { Component, OnInit }        from '@angular/core';
import { Router }                   from '@angular/router';

@Component({

    template: '<router-outlet></router-outlet>',
})
export class SimpleLayoutComponent implements OnInit {

    constructor( private router: Router ) { }

    ngOnInit(): void { }
}

在路由器配置中，定义布局组件的路径。

{
        path: '/pages',
        component: SimpleLayoutComponent,
        data: {
            title: 'Pages'
        },
        children: [
            {
                path: 'Login',
                component: BlankComponent,
                data: {base: 'blank', 'login': false},
            }
         ]
}

此示例路径下的所有子路由 - “/pages/*” 将使用布局 SimpleLayoutComponent，该组件仅显示子组件模板，不显示其他内容。

【讨论】：