Angular2路由配置（帶兩個參數的路線）

我配置我的angular2應用我的路線：Angular2路由配置（帶兩個參數的路線）

因此，在app.routes.ts：

export const ROUTES: Routes = [{ 
    path: '', redirectTo: 'login', pathMatch: 'full' 
    }, { 
    path: 'app', loadChildren:() => System.import('./layout/layout.module') 
    }, { 
    path: 'login', loadChildren:() => System.import('./login/login.module') 
    }, { 
    path: 'validate/:id/:token', loadChildren:() => System.import('./validate/validate.module') 
    }, { 
    path: 'error', component: ErrorComponent 
    }, { 
    path: '**', component: ErrorComponent 
    } 
];

目前，我面臨了兩個問題：

當我去http://localhost:3000，它重定向到http://localhost:3000/Living%20User%20Platform#/login：我不太弄清楚爲什麼這個Living%20User%20Platform#被添加到URL，而不是http://localhost:3000/login。
正如你所看到的，我使用兩個參數設置路線：validate/:id/:token。然而，當我在這個書面方式URL（http://localhost:3001/Living%20User%20Platform#/validate?id=sdfsdf&token=sdfsdf）在瀏覽器中，它轉到錯誤路線：

ValidateModule.ts：

export const routes = [ 
    {path: '', component: Validate, pathMatch: 'full'} 
]; 

@NgModule({ 
    declarations: [ 
    // Components/Directives/ Pipes 
    Validate 
    ], 
    imports: [ 
    CommonModule, 
    FormsModule, 
    RouterModule.forChild(routes), 
    ] 
}) 
export default class ValidateModule { 
    static routes = routes; 
}

任何想法？

來源

2016-12-16 Jordi

你得到Living%20User%20Platform到你的路線，因爲可能是你有沒有在你的HTML設置正確<base href="/">和URL validate/:id/:token您需要檢查UTL http://localhost:3001/Living%20User%20Platform#/validate/sdfsdf/sdfsdf

來源

2016-12-16 10:09:58 ranakrunal9

謝謝@ ranakrunal9。我懂了。根據最後一個問題（有參數的路由），有沒有辦法設置一個路由路徑，以便接受帶有查詢參數而不是''path''參數的url，比如'validate？id = x＆token = t'？ – Jordi

您可以使用'NavigationExtras'將params作爲'queryParams'傳遞，同時從一個組件重定向到另一個組件。您可以直接發送參數作爲查詢參數，而無需將其聲明爲路由配置，並且您需要使用'ActivatedRoute'從組件獲取URL中的'queryParams'。檢查https://angular.io/docs/ts/latest/guide/router.html – ranakrunal9

非常感謝@ ranakrunal9。我現在正面臨着其他問題：當我進入'http：// localhost：3000/validate？id = i＆token = t'時，將顯示驗證「組件+模板」，不過，我在瀏覽器url上檢測到進入'http：// localhost：3000/login'。我已經在post中添加了我定義子路由的模塊代碼（只有''''）。有什麼問題嗎？ – Jordi

我只需validate路徑改變了我的路線（validate/:id/:token ）：

export const ROUTES: Routes = [{ 
    path: '', redirectTo: 'login', pathMatch: 'full' 
    }, { 
    path: 'app', loadChildren:() => System.import('./layout/layout.module') 
    }, { 
    path: 'login', loadChildren:() => System.import('./login/login.module') 
    }, { 
    path: 'validate', loadChildren:() => System.import('./validate/validate.module') 
    }, { 
    path: 'error', component: ErrorComponent 
    }, { 
    path: '**', component: ErrorComponent 
    } 
];

爲了開始使用ActivatedRoute從部件查詢參數：

constructor(private router: Router, private route: ActivatedRoute, private userService: UsersService) 
    { 
    this.user = undefined; 
    } 

    ngOnInit():void { 
    this.route.queryParams.subscribe(params => { 
     this.id = params['id'] || undefined; 
     this.token = params['token'] || undefined; 
    }); 
    }

來源

2016-12-16 11:29:24 Jordi

Angular2路由配置（帶兩個參數的路線）

回答

相關問題