Angular 6-嵌套路由问题

时间:2018-09-05 20:49:25

标签: angular6 angular-routing

我正在尝试为admin父菜单设置嵌套路由。在管理员下方,我有两条子路线-Security SettingsConfiguration

当我单击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

建议感激……

0 个答案:

没有答案