角度2.すべてのルートのメインレイアウト

Question

私のアプリのレイアウトを作成したい。だから、私は次のルートを使用します。あなたが見ることができるように

export const routes: Routes = [ 
{ 
    path: '', 
    component: MainLayoutComponent, 
    children: [ 
     { 
     path: '', 
     redirectTo: 'contact', 
     pathMatch: 'full' 
     }, 
     { 
     path: 'contact', 
     loadChildren : 'app/contact/contact.module#ContactModule' 
     } 
    ] 
    } 

]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule {} 

私はレイアウトのためMainLayoutComponentを使用しています。そして、私のアプリケーションが起動するとき、私はcontactパスにリダイレクトしたいです。

レイアウトが含まれているナビゲーションとrouter-outlet：

@Component({ 
    template: ` 
    <nav>Navigation content</nav> 
    <div class="container"><router-outlet></router-outlet></div> 
    `, 
}) 

これはContactComponentでテンプレートです：
<h2>Contact Component</h2>

、アプリが実行されたとき、私はContact Componentメッセージが、私は見ていない見ている問題ナビゲーション。しかし、私がlocalhost:3000/contactを開いた場合、私はナビゲーションとContact Componentメッセージを参照してください。私は何が欠けていますか？

Plunkerです。あなたは確認することができます、 URLにリダイレクトするためにGo to Contactボタンをクリエイトしました。

Answer 1

多分あなたはそれを意図的にやったことがあります。しかし、あなたは本当に複雑すぎることがあるようです。あなたは簡単にあなたがはるかに単純な構造とし、あなたの主成分でナビゲーションを入れて何をしようとして達成することができます：とにかく

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

- あなたのplunkerは、あなたが期待する何をされていない理由があるので、あなたのコンタクトモジュールにあなたにもいくつかのルーティングを定義しました：

{ path: '', component: ContactComponent } 

私は接触部品からコンタクト・ルーティングを削除し、今では動作しているようだ：

@NgModule({ 
    imports:  [ ], 
    declarations: [ ContactComponent ], 
    providers: [ ] 
}) 
export class ContactModule { } 

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