子ルートから角度4の親ルーターアウトレット

私の角形アプリケーションでカスタマイズ可能なナビゲーションバーを実現しようとしています。ここで子ルートから角度4の親ルーターアウトレット

は私app.componentテンプレート

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand pageTitle">iMobile</a> 
    </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <router-outlet name="navbar"></router-outlet> 

      <ul class="nav navbar-nav navbar-right" *ngIf="authenticated"> 
       <li><a [routerLink]="['/login']"><span class="glyphicon glyphicon-log-out"></span> Log Out</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

<alert></alert> 
<router-outlet></router-outlet>

、ここでは私のapp.routingは私が望む何

import { Routes, RouterModule } from '@angular/router'; 

import { AuthGuard } from './_guards/index'; 

import { LoginComponent } from './login/index'; 

// Reports section of the website 
import { ReportsComponent } from './reports/index'; 
import { DashboardComponent } from './reports/dashboard/index'; 
import { SampleComponent } from './reports/sample/index'; 

// Corporate section of the website 
import { CorporateComponent } from './corporate/index'; 
import { CorpNavbarComponent } from './corporate/corpNavbar/index'; 

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { 
     path: 'reports', component: ReportsComponent, canActivate: [AuthGuard], 
     children: [ 
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, 
      { path: 'dashboard', component: DashboardComponent }, 
      { path: 'sample', component: SampleComponent } 
     ] 
    }, 
    { 
     path: 'corporate', component: CorporateComponent, canActivate: [AuthGuard], 
     children: [ 
      { path: '', component: CorpNavbarComponent, outlet: 'navbar'} 
     ] 
    } 


    // otherwise redirect to home 
    { path: '**', redirectTo: 'reports' } 
]; 

export const routing = RouterModule.forRoot(appRoutes);

であり、ベースのナビゲーションバーのナビゲーション部分を交換することができることですウェブサイトのセクションにこれは可能ですか？

出典

2017-06-26 Irrelevant_Coder

私はあなたの質問を正しく理解しているか分かりませんが、試してみます。したがって、あなたはあなたの現在のページに応じてnavbarの一部を置き換えるつもりですか？

アプリのすべての動的部分のハブとしてappコンポーネントを使用できます。基本的なhtml構造としてappコンポーネントがあり、Navbar1、Navbar2、Contentの3つのコンポーネントがあるとします。

app.component：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    </head> 
    <body> 
    <router-outlet name="nav"></router-outlet> 

    <router-outlet name="content"></router-outlet> 
    </body> 
</html>

そして、あなたがコンポーネントをロードする必要があり、あなたのルートに指定する必要があります：

const routes: Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full', outlet: }, 
    { path: 'home', component: HomeComponent, outlet: content }, 
    { path: 'category1', component: Navbar1, outlet: navbar1 },

このリンクは、あなたがそれを把握に役立つかもしれません。

http://onehungrymind.com/named-router-outlets-in-angular-2/

出典

2017-06-26 20:23:18 anazard

私はすでにその記事を見てきました。それは子供のルートのために特に指定されたアウトレットを使用することについて話します。私が達成しようとしていること（それは非常にうまくいかない可能性があります）は、子ルートからapp.componentのコンセントにコンポーネントを割り当てます。私が投稿したコードを使用してこれを行うと、「CorpNavbarComponentを読み込むためにコンセントのnavbarが見つかりません」というエラーが表示されます。 –

@Irerelevant_Coder回避策を見つけましたか？私はこの問題を発見しましたhttps://github.com/angular/angular/issues/10726本当にこの1つhttps://github.com/angular/angular/issues/18271#issuecomment-348071491 – epelc

フォローアップのための@epelcありがとう。私はこれの回避策を見つけたことはありませんでした。修正が実装されるまで、私が達成しようとしていた機能を棚上げするだけでした。 –

子ルートから角度4の親ルーターアウトレット

答えて

関連する問題