Угловой 6 названный выход в компонентных и вложенных маршрутах - PullRequest
Новая
       27

Угловой 6 названный выход в компонентных и вложенных маршрутах

0 голосов
/ 05 июня 2019

Я некоторое время не был вдали от 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}

Будучи немного озадаченным здесь ...

...