角度2（特定の角度2.1.0）のパターンでルーティングするエラー

Question

私はアプリを開発していますが、ログインとアプリが必要です。アプリには共通のナビゲータがあります。ルートにいくつか問題があります。

export const routes = RouterModule.forRoot([ 
    {path: "login", component: LoginComponent}, 
    {path: "", component: HomeComponent, children: [ 
    {path: "history", component: HmodeComponent}, 
    {path: "realtime", component: RtmodeComponent} 
    ]}, 
]); 

私のコンポーネントは

ナビ（アプリ用ナビゲーションコンポーネント）

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

@Component({ 
    selector: 'app-nav', 
    templateUrl: './nav.component.html', 
    styleUrls: ['./nav.component.css'] 
}) 
export class NavComponent implements OnInit { 
    constructor(private router:Router) { } 

    ngOnInit() { 
    } 

} 

ログインコンポーネント

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

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'] 
}) 
export class LoginComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

ホームコンポーネント

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

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

です210

HMODEコンポーネント

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

    @Component({ 
     selector: 'app-hmode', 
     templateUrl: './hmode.component.html', 
     styleUrls: ['./hmode.component.css'] 
    }) 
    export class HmodeComponent implements OnInit { 

     constructor() { } 

     ngOnInit() { 
     } 

} 

そして私は、ログインを行い、ログインがアプリケーションに正しくリダイレ​​クトされたときに、私の考えは

これらは、ビュー（HTML）であるすべてのルートが含まれて

使用ホームコンポーネントでありたいです

app.component.html

<router-outlet></router-outlet> 

login.component.html

<p> 
    login works! 
</p> 

home.component.html

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

<app-nav></app-nav> 

hmode.component.html

<p> Home content </p> 

そしてnav.html別のコンポーネントである、と私はログイン後HMODEにリダイレクトすることを望みますとそのnavbarはすべてのルートで見えるので、私はhomコンポーネントを使用しています。

Answer 1

私はこの記事で説明し、このためのソリューションでした：あなたはここでチェックアウトすることができます同様のソリューションは、 Angular 2 - Content not loading in router outlet

あります： 彼らは異なる表示するのAuthServiceと* ngIfを使用しているように見えますLoggedIn関数の値に基づいたルート： https://github.com/predatorkill/ng2-forms-demo