角度2の別のレイアウトナビゲーションasp.netコア

Question

私はヘッダーの本文とフッターを持つメインレイアウトを持っています。いくつかのページでは、ヘッダーだけを本文とフッターに表示したくありません。

私は実装しようとしたthis answerを通過しましたが、それを行う方法を理解することができませんでした。ここで

は私のコードです：

app.component.ts

import { Component } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
@Component({ 
    selector: 'main-app', 
    template: `<router-outlet name="header"></router-outlet> 
       <router-outlet name="navbar"></router-outlet> 
       <router-outlet></router-outlet> 
       <router-outlet name="footer"></router-outlet>` 
}) 
export class AppComponent { } 

Footer.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'Footer-app', 
    templateUrl: '<p>Copy rights emakitri 2017</p>' 
}) 
export class FooterComponent { 
    constructor() { 
     console.log("test"); 
    } 
} 

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { RouterModule, Routes } from '@angular/router'; 
import { HttpModule, JsonpModule } from '@angular/http'; 
import { ModuleWithProviders } from '@angular/core'; 
import { AppComponent} from "./app.component"; 
import { EqualValidator } from "./Validation/equal.validator.directive"; 
import { LoginComponent } from "./Components/login.Component"; 
import { HomeComponent } from "./Components/home.component"; 
import { DashBoardComponent } from "./Components/dashBoard.Component"; 
import { FooterComponent } from "./Components/footer.Component"; 

const appRoutes: Routes = [ 
    { path: '', redirectTo: 'Home/Index', pathMatch: 'full' }, 
    { path: 'Account/Login', component: LoginComponent }, 
    { path: 'Home/Index', component: HomeComponent,children: [ 
     {path: '', component: FooterComponent , outlet: 'footer'} 
     ] }, 
    { path: 'DashBoard/Index', component: DashBoardComponent} 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 


@NgModule({ 
    imports: [BrowserModule, FormsModule, HttpModule, routing], 
    declarations: [AppComponent, LoginComponent, HomeComponent, DashBoardComponent, EqualValidator,FooterComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

[ホーム/インデックス]に移動すると、フッターコンテナが表示されません。私は間違って何をしていますか？子ルーティングのために何かをインポートする必要がありますか？

Answer 1

'フッタは' 'ホーム/インデックス' の子である、

ので、あなたが必要とする：

<router-outlet name="footer"></router-outlet> 

HomeComponentテンプレートにあなたがやろうと何の

例であることを：

https://plnkr.co/edit/sgGDpti43GPM5cHntPpu?p=preview

幸運！ :)ここで

Answer 2

は、作業モジュールは、私のようにエラーを取得しています

App.Module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { Routes,RouterModule} from '@angular/router'; 
import { HttpModule, JsonpModule } from '@angular/http'; 
import { ModuleWithProviders } from '@angular/core'; 
import { AppComponent} from "./app.component"; 
import { EqualValidator } from "./Validation/equal.validator.directive"; 
import { LoginComponent } from "./Components/login.Component"; 
import { HomeComponent } from "./Components/home.component"; 
import { DashBoardComponent } from "./Components/dashBoard.Component"; 
import { FooterComponent } from "./Components/footer.Component"; 
import { NavComponent } from "./Components/nav.Component"; 


const appRoutes: Routes = [ 
    { path: '', redirectTo: 'Home/Index', pathMatch: 'full' }, 
    { path: 'DashBoard/Index', component: DashBoardComponent}, 
    { path: 'Account/Login', children: [ 
      {path: '', component: NavComponent, outlet: 'navbar'}, 
      {path: '', component: LoginComponent}, 
      {path: '', component: FooterComponent, outlet: 'footer'} 
      ]}, 
    { path: 'Home/Index', children: [ 
      {path: '', component: NavComponent, outlet: 'navbar'}, 
      {path: '', component: HomeComponent}, 
      {path: '', component: FooterComponent, outlet: 'footer'} 
      ]} 
]; 



export const routing = RouterModule.forRoot(appRoutes); 

@NgModule({ 
    imports: [BrowserModule, FormsModule, HttpModule,routing], 
    declarations: [AppComponent, LoginComponent, HomeComponent, DashBoardComponent, EqualValidator,FooterComponent,NavComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

App.Component.ts

import { Component } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
@Component({ 
    selector: 'main-app', 
    template: `<router-outlet name="navbar"></router-outlet> 
       <div class="container"> 
       <router-outlet></router-outlet> 
       </div> 
       <router-outlet name="footer"></router-outlet>` 
}) 
export class AppComponent { }