1

私の主なルーティングは次のようなものです：

export const routes = [
  {
    path: "",
    component: SiteLayoutComponent,
    //canActivate: [AuthGuard],
    children: [
      { path: "", redirectTo: "/routeA", pathMatch: "full" },
      ...... 
      ......
      {
        path: 'routeA',
        loadChildren: 'app/website/routeA/search/routeA.module#RouteAModule'
      }
    ]
  }
];

次に、routeAモジュールのルーティングは次のようになります。

const routes: Routes = [
  { path: '', component: SearchComponent,
    children:[
      { path: '', pathMatch: 'full', redirectTo: 'featured'},
      { path: 'search', component: FilterResultComponent, outlet: 'searchResult' },
      { path: 'search/:listId', component: DetailsComponent, outlet: 'searchResult' },
      { path: ':listType', component: ListComponent, outlet: 'jobList' }
    ]
  }


];

そして私のSearchComponentテンプレートは次のようなものです:

<search-box></search-box>
<router-outlet name="searchResult"></router-outlet>
<!-- Body Container -->
<div class="container">
  <div class="row">

    <div class="col-sm-8">


      <!-- Job Lists Section -->
      <section class="job-list">
        <div role="tabpanel" class="custom-tab">
          <!-- Nav tabs -->
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" [class.active]="activeTab === 'featured'" routerLinkActive="" [routerLinkActiveOptions]="{exact: true}">
              <a [routerLink]="['featured']" aria-controls="featured" role="tab" data-toggle="tab"><i class="material-icons">&#xE885;</i> Featured Jobs</a>
            </li>
            <li role="presentation" [class.active]="activeTab === 'female-only'">
              <a [routerLink]="['female-only']" aria-controls="female" role="tab" data-toggle="tab"><i class="material-icons">&#xE87C;</i> Female Only</a>
            </li>
            <li role="presentation" [class.active]="activeTab === 'expiring-today'">
              <a [routerLink]="['expiring-today']" aria-controls="expiring" role="tab" data-toggle="tab"><i class="material-icons">&#xE01B;</i> Expiring Today</a>
            </li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <router-outlet name="jobList"></router-outlet>
          </div>
        </div>
      </section>
      <!-- End Lists Section -->
    </div
 </div>

私が望むのは、routeAモジュールをメイン ルーティングのデフォルト ルートとしてロードすることです。routeAモジュール内の注目のルートは、デフォルト ルートの代わりにルート パラメータとして使用され:listType、featuredタブがデフォルトで選択されています。しかし、search-boxコンポーネントの検索ボタンをクリックすると、searchルートにナビゲートしてfilterResultComponentロードする必要があり、やりたいことは次のとおりです。1-ルーターアウトレットListComponent内jobListのタブの内容を表示し、他のコンポーネントは「searchResult」アウトレット内にある必要があります。 「ListComponent」とタブを非表示にします。ルーターのコンセントでこれを行うにはどうすればよいですか?

4

0 に答える 0