我想知道當我們打開 localhost:4200/signin?url=login 時我想打開登錄組件，當我們打開 localhost:4200/signin?url=register 時我必須加載注冊組件。那么實作此功能的最佳方法是什么。
uj5u.com熱心網友回復：
您沒有提供代碼的完整詳細資訊，我不知道您在哪里router-outlet或/xyz路徑的組件在做什么。但如果是我，那么，我會簡單地將查詢引數邏輯添加到/xyz映射到的任何組件路徑并檢查其中的查詢引數ngOnInit()
例子：
constructor(
private router: Router,
private activatedRoute: ActivatedRoute
) {
}
ngOnInit() {
this.activatedRoute.queryParams.subscribe(val => {
const param = val['url'];
switch (param) {
case 'login':
this.router.navigate(['login']);
break;
case 'register':
this.router.navigate(['register']);
break;
}
});
}
Stackblitz 演示
注意：如果您想要使用 Promise 和路由保護的解決方案，請在 qeustion 中添加代碼的完整詳細資訊。
編碼愉快！
uj5u.com熱心網友回復：
您可以在您的路線中添加login和register路線或在您的路線中app-routing.module.ts添加孩子signin
const routes: Routes = [
{
path: 'signin',
component: SigninComponent
},
{
path: 'signin/register',
component: RegisterComponent
},
{
path: 'signin/login',
component: LoginComponent
},
];
然后使用基于引數的導航activatedRoute
constructor(
private activatedRoute: ActivatedRoute,
private router: Router,
){}
ngOnInit() {
this.activatedRoute.queryParams.subscribe((params: Params) => {
switch (params['url']) {
case 'login':
this.router.navigate(['signin/login']);
break;
case 'register':
this.router.navigate(['signin/register']);
break;
}
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/535092.html
標籤：有角度的
上一篇：禁用此特定表單的按鈕
下一篇：通過角度指令禁用按鈕和輸入欄位