Routingを使用したAngular2の複数のレイアウト

Routingを使用してAngular2でWebサイトを構築しています。Routingを使用したAngular2の複数のレイアウト

私は問題に直面しました。私は、ルータを使用して私のAngular2アプリに複数のレイアウトを使用する方法を教えてください。

例：Login、Signup ...（1列）、Home、Profile ...（1ヘッダー、2列、1フッター）などのレイアウトが2つ以上あります。 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>は、コンポーネントを、対応する表示されますが、私はすべてのコンポーネントをレイアウトする必要はありませんアプリ全体の構造。

出典

2016-05-04 ronin1184

私も同じ問題に直面しています。解決策はありますか？ –

特定のページにレイアウトしたくない場合は、他のコンテンツしか持たないレイアウトコンポーネントを定義することができます。

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}, 
      } 
     ] 
}

この例のパスの下にあるすべての子ルート - 「/ページ/ *」のみ子コンポーネントテンプレートとなし、他のコンテンツを表示するレイアウトSimpleLayoutComponentを使用します。

出典

2017-03-04 18:45:02 ajanta

Routingを使用したAngular2の複数のレイアウト

答えて

関連する問題