Question

我已经有一段时间没有离开Angular了，而我又回到了它。我遇到嵌套路由和命名路由器出口的问题。

我有一个容纳主要出口的主要部件：

app.component.ts

<clr-main-container>
  <app-navigation></app-navigation>
  <div class="content-container">
  <main class="content-area">
    <router-outlet></router-outlet>
  </main>
  <clr-vertical-nav [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="sidenavCollapsed" *ngIf="displaySidenav">
    <app-sidenav *ngIf="currentUser.currentRole != null; else locked" [currentRole]="currentUser.currentRole"></app-sidenav>
    <ng-template #locked clrVerticalNavHeader>
        <a clrVerticalNavLink>
            <clr-icon clrVerticalNavIcon shape="sad-face"></clr-icon>
            Please select a role
        </a>
    </ng-template>
  </clr-vertical-nav>
</div>

另一个拥有辅助插座的组件：

person.component.ts

<h1>{{person.firstname}} {{ person.lastname }}</h1>
<p class="status" [ngClass]="person.status == 'ACTIVE'? 'status-active' : 'status-inactive'"> {{ person.status }}</p>
<router-outlet name="personrouter"></router-outlet>

我的路线声明如下：

const routes: Routes = [
  { path: '', component: SearchComponent, canActivate: [AuthGuard], pathMatch: 'full'},
  { path: 'login', component: LoginComponent},
  { path: 'search', component: SearchComponent, canActivate: [AuthGuard]},
  { 
    path: 'person', component: PersonComponent,
    children: [
      { path: '', component: PersonDetailsComponent, outlet: 'personrouter', pathMatch: 'full' },
      { path: 'phone', component: PersonDetailsComponent, outlet: 'personrouter' }
    ],
    canActivate: [AuthGuard]
  },

  { path: '**', redirectTo: ''}
];

到目前为止，一切都工作正常，因为我没有使用嵌套的路由，但是由于我已经声明了这些路由并尝试使用辅助出口，所以我遇到了一些问题。

转到/ person可以正常工作，我点击了PersonComponent，并且辅助出口显示了PersonDetailsComponent。但是，转到/ person / phone只是系统地将我重定向到root（http://localhost:4200/）。

我为路由器启用了跟踪，但它只是清楚地表明它正在重定向：

platform-browser.js:216 Router Event: NavigationStart
platform-browser.js:211 NavigationStart(id: 5, url: '/person/phone')
platform-browser.js:211 NavigationStart {id: 5, url: "/person/phone", navigationTrigger: "imperative", restoredState: null}
app.component.ts:29 NavigationStart {id: 5, url: "/person/phone", navigationTrigger: "imperative", restoredState: null}
platform-browser.js:216 Router Event: RoutesRecognized
platform-browser.js:211 RoutesRecognized(id: 5, url: '/person/phone', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
platform-browser.js:211 RoutesRecognized {id: 5, url: "/person/phone", urlAfterRedirects: "/", state: RouterStateSnapshot}
app.component.ts:29 RoutesRecognized {id: 5, url: "/person/phone", urlAfterRedirects: "/", state: RouterStateSnapshot}

在这里有点困惑...

组件和嵌套路线中的Angular 6命名插座

0 个答案: