angular6 - Angular 6 - 嵌套路由问题

Question

我正在尝试admin为父菜单设置嵌套路由。在 admin 下面我有两个子路由 -Security Settings和Configuration.

当我单击Configuration菜单项时，我的页面被重定向到AdminComponent并呈现Admin works. 但是，如果我点击Site Configuration，它不会SiteConfigComponent像我期望的那样重定向到我的；它只是AdminComponent再次重定向到。

即这是siteconfig路线片段，下面也再次显示。

 <a mat-button routerLink="/admin/siteconfig">
        Site Configuration
    </a>

HTML：

<a mat-button routerLink="/home" routerLinkActive="horizontal-active-link" [routerLinkActiveOptions]="{exact:true}">Home</a>

<a mat-button routerLink="/preferences" routerLinkActive="horizontal-active-link" [routerLinkActiveOptions]="{exact:true}">Preferences</a>

<a mat-button [matMenuTriggerFor]="appMenu">Admin
<mat-icon class="caret">arrow_drop_down</mat-icon>
</a>

<mat-menu #appMenu="matMenu" [overlapTrigger]="false" class="mega-menu app-dropdown">
<div fxLayout="column wrap">
	<div fxFlex class="p-1">
		<a mat-menu-item routerLink="/admin" routerLinkActive="horizontal-active-link" [routerLinkActiveOptions]="{exact:true}">
			<b>Configuration</b>
		</a>
		<mat-divider></mat-divider>
		<button mat-menu-item>Security Settings</button>            
		<a mat-button routerLink="/admin/siteconfig" routerLinkActive="horizontal-active-link">
			Site Configuration
		</a>
	</div>
</div>
</mat-menu>

export const routes: Routes = [
    { 
        path: '', 
        component: PagesComponent, children: [
            { path: '', component:HomeComponent, canActivate: [AuthGuard]},
            { path: 'home', component: HomeComponent, canActivate: [AuthGuard]},
            { path: 'admin', component: AdminComponent,
              children: [
                { path: '', component: AdminComponent },
                { path: 'management/users', component: UsersManagementComponent, canActivate: [AuthGuard] },
                { path: 'management/roles', component: RolesManagementComponent, canActivate: [AuthGuard] },
                { path: 'siteconfig', component: SiteConfigComponent, canActivate: [AuthGuard]}
              ], 
                canLoad: [AuthGuard]
            }
        ]
    },
    { path: 'login', component: LoginComponent},       
    { path: '**', component: NotFoundComponent }
];

app.component.html（由 index.html 加载）是：

<div id="app" class="100h app" [ngClass]="appSession.settings.Theme"> 
  <router-outlet></router-outlet>
</div>

同样，如果我单击Site Config它应该转到SiteConfigComonent.

建议赞赏...

标签： angular6angular-routing