[英]Angular 4 Routing - All Routes are redirected to Default Route
我為我的angular 4應用程序設置了一個簡單的路由,包括使用Tetradata Covalent和Angular Material創建的sidemenu,我使用這個Angular 2/4身份驗證教程來處理登錄,但所有子路由器鏈接都重定向到默認頁面(儀表板)。 任何幫助或建議將受到高度贊賞。
app.routing.ts
export const APP_ROUTES: Routes = [
{path: 'login', component: HomeComponent},
{ path: '', redirectTo: 'mainpage', pathMatch: 'full' },
{ path: '**', redirectTo: 'mainpage' },
{
path: 'mainpage',
component: MainPageComponent,
canActivate:[AuthGuard],
children: [
{path: 'order', component: OrderComponent},
{path: 'dashboard', component: DashboardComponent},
{path: 'stock', component: StockComponent},
{path: 'Report/sales', component: SalesComponent},
{path: '', redirectTo: 'dashboard', pathMatch: 'full'}
{path: '**', redirectTo: 'dashboard', pathMatch: 'full'}
]
}
];
page.component.html
<td-layout>
<td-navigation-drawer flex sidenavTitle="EzyAgric" logo="assets:logo" name="Akorion" email="info.akorion.com">
<md-nav-list>
<a md-list-item [routerLink]="['dashboard']">
<md-icon>dashboard</md-icon>
Dashboard</a>
<md-divider></md-divider>
<h3 md-subheader>Orders</h3>
<a md-list-item [routerLink]="['stock']">
<md-icon>archive</md-icon>
Stock
</a>
<a md-list-item [routerLink]="['order']">
<md-icon>shopping_cart</md-icon>
Received Orders
</a>
</td-navigation-drawer>
<td-layout-nav [toolbarTitle]="getTitle()" >
<div class="example-scrolling-content">
<router-outlet></router-outlet>
</div>
</td-layout-nav>
</td-layout>
AuthGuard.ts
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (localStorage.getItem('currentUser')) {
// logged in so return true
return true;
}
// not logged in so redirect to login page with the return url
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
return false;
}
}
在您定義路線的app.routing.ts中,在定義了所有路線后,將通配符行移至末尾。
export const APP_ROUTES: Routes = [
{path: 'login', component: HomeComponent},
{ path: '', redirectTo: 'mainpage', pathMatch: 'full' },
{
path: 'mainpage',
component: MainPageComponent,
canActivate:[AuthGuard],
children: [
{path: 'order', component: OrderComponent},
{path: 'dashboard', component: DashboardComponent},
{path: 'stock', component: StockComponent},
{path: 'Report/sales', component: SalesComponent},
{path: '', redirectTo: 'dashboard', pathMatch: 'full'}
{path: '**', redirectTo: 'dashboard', pathMatch: 'full'}
]
},
{ path: '**', redirectTo: 'mainpage' } // this needs to be after other routes
];
由於它是一個外卡路線,因為路線順序很重要,因此在到達任何其他路線之前,角度將會擊中此路線。
您必須更改類似的代碼:
export const APP_ROUTES: Routes = [
{ path: '', redirectTo: 'mainpage', pathMatch: 'full' },
{ path: 'login', component: HomeComponent },
{
path: 'mainpage',
component: MainPageComponent,
canActivate:[AuthGuard],
children: [
{path: 'order', component: OrderComponent},
{path: 'dashboard', component: DashboardComponent},
{path: 'stock', component: StockComponent},
{path: 'Report/sales', component: SalesComponent}
]
},
{ path: '**', redirectTo: 'mainpage' }
];
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.