本文介绍了如何在angular2中使用多个路由器插座?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个主要的router-outlet
,用于显示登录屏幕(/login
)和主要内容屏幕(登录后显示)(/main
).
一旦用户进入内容屏幕,我想在顶部显示一个导航栏,有 2 个选项(例如,概览"、见解").此导航栏对于 OverviewComponent
和 InsightsComponent
是通用的在这个导航栏下方,我想显示另一个路由器插座,它会根据用户在导航栏中的点击加载 OverviewComponent
或 InsightsComponent
.如果我将 '/overview' 和/'insights' 作为路由,它会直接向我显示相应的组件,而不是导航栏.
以下是我当前的路由配置(这是不对的):
const appRoutes: Routes = [{ 路径:'main',组件:MainComponent},{ 路径:'概览',组件:概览组件},{ 路径:'见解',组件:InsightsComponent },{ 路径:'登录',组件:LoginComponent },{ 小路: '',重定向到:'/登录',路径匹配:'完整'},{ 路径:'**',组件:PageNotFoundComponent }];
请告诉我我们是否可以在 angular2 angular4 中实现这一点.我正在使用以下版本:
"@angular/core": "^4.0.0""@angular/router": "^4.0.0""@angular/cli": "1.0.1"
********************尝试 2 - 仍然无法正常工作******************
const appRoutes: Routes = [{ 路径:'主要',孩子们: [{ 路径:'',组件:MainComponent },{ 路径:'概览',组件:概览组件},{ 路径:'见解',组件:InsightsComponent },]},{ 路径:'登录',组件:LoginComponent },{ 小路: '',重定向到:'/登录',路径匹配:'完整'},{ 路径:'**',组件:PageNotFoundComponent }];
*******尝试 2 - 包含所有组件的 Sudo 代码 - 仍然无法正常工作*******
//app.component.html<路由器插座></路由器插座>//app.module.tsconst appRoutes: 路由 = [{ 路径:'主要',孩子们: [{ 路径:'',组件:MainComponent },{ 路径:'概览',组件:概览组件},{ 路径:'见解',组件:InsightsComponent },]},{ 路径:'登录',组件:LoginComponent },{ 小路: '',重定向到:'/登录',路径匹配:'完整'},{ 路径:'**',组件:PageNotFoundComponent }];//登录.component.html<div class="text-center vertical-center"><表格><div class="水平"><label for="">电子邮件</label><input class="form-control" type="text" name="" value="">
<div class="水平"><label for="">密码</label><input class="form-control" type="password" name="" value="">
<button class="btn btn-primary" (click)="navigate()">登录</button></表单>
//登录.component.ts导航(){this.router.navigate(['./main']);}//main.component.html<app-header></app-header><路由器插座></路由器插座>//app.header.html<ul class="nav navbar-nav"><li class=""><a routerLink="/main/overview" routerLinkActive="active">OVERVIEW</a></li><li class=""><a routerLink="/main/insights" routerLinkActive="active">INSIGHTS</a></li>//概述.html<p>这是概览部分</p>//见解.html<p>这是洞察部分</p>
********尝试 3 - 工作**********
const appRoutes: Routes = [{ 路径:'main',组件:MainComponent,孩子们: [{ 路径:'',组件:MainComponent },{ 路径:'概览',组件:概览组件},{ 路径:'见解',组件:InsightsComponent },]},{ 路径:'登录',组件:LoginComponent },{ 小路: '',重定向到:'/登录',路径匹配:'完整'},{ 路径:'**',组件:PageNotFoundComponent }];
解决方案
因此,如果我回答对了问题,您希望最初拥有登录屏幕,并且在用户登录后,您希望他看到显示导航的/main.登录屏幕和主应用程序都应该有不同的布局.
我们有一个类似的案例,使用 LayoutComponent.这是一个简化的例子.
//这是具有顶级"路由器的引导的主要组件.@Component({selector: 'app', template: ''})类 AppComponent {}//主路由配置//这里 AuthModule 有配置了登录和注销的路由器和 LoginGuard//当用户未通过身份验证时,将用户重定向到/auth/login.//我们使用延迟加载,但您可以使用直接组件代替出口const APP_ROUTES:路线= [{path: '', redirectTo: 'main', pathMatch: 'full'},{path: 'auth', loadChildren: '../modules/+auth/auth.module#AuthModule'},{小路: '',组件:布局组件,canActivate: [LoginGuard],孩子们: [{path: 'main', loadChildren: '../modules/+main/main.module#MainModule'}]}];//AuthModule/LoginComponent 有自己的模板,它将被渲染//进入顶级"路由器插座.//布局组件//在这里定义可以包含导航的主应用程序布局//以及应用程序全局的任何其他内容.它有另一个路由器插座//当布局可访问时呈现(在这种情况下,当用户通过身份验证时).@成分({选择器:'应用程序布局',模板:`<div id="包装器"><app-sidebar></app-sidebar><div id="page-wrapper" class="gray-bg dashboard-1" adjust-content-height><路由器插座></路由器插座>
<通知></通知><error-modal></error-modal>`})导出类 LayoutComponent {}//Auth/LoginComponent 可以有自己的模板,与主应用程序有不同的布局
所以流程是这样的:
- 当用户尝试加载/然后她重定向到/main
- 如果用户未通过身份验证,她会重定向到/auth/login 否则她会加载/main
希望有所帮助.
更新了 sickelap/ng-starter 存储库,其中包含以下示例应用:
I have a main router-outlet
, which is used to display a login screen (/login
) and the main content screen(which is shown after login) (/main
).
Once the user is on content screen, I want to show a nav-bar on top, with 2 options(say, 'Overview', 'Insights'). This nav-bar is common for OverviewComponent
and InsightsComponent
Below this nav-bar, I want to show another router-outlet, which would load OverviewComponent
or InsightsComponent
, based on what user clicks in nav-bar. If I give '/overview' and /'insights' as the route, it would directly show me the respective component, but not the nav-bar.
Following is my current routing config (this is not right):
const appRoutes: Routes = [
{ path: 'main', component: MainComponent},
{ path: 'overview', component: OverviewComponent},
{ path: 'insights', component: InsightsComponent },
{ path: 'login', component: LoginComponent },
{ path: '',
redirectTo: '/login',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
Kindly let me know if we can achieve this in angular2 angular4. I'm using following version:
"@angular/core": "^4.0.0"
"@angular/router": "^4.0.0"
"@angular/cli": "1.0.1"
******************Attempt 2 - Still not working******************
const appRoutes: Routes = [
{ path: 'main',
children: [
{ path: '', component: MainComponent },
{ path: 'overview', component: OverviewComponent },
{ path: 'insights', component: InsightsComponent },
]
},
{ path: 'login', component: LoginComponent },
{ path: '',
redirectTo: '/login',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
*******Attempt 2 - Sudo Code with all components - Still not working*******
//app.component.html
<router-outlet></router-outlet>
//app.module.ts
const appRoutes: Routes = [
{ path: 'main',
children: [
{ path: '', component: MainComponent },
{ path: 'overview', component: OverviewComponent },
{ path: 'insights', component: InsightsComponent },
]
},
{ path: 'login', component: LoginComponent },
{ path: '',
redirectTo: '/login',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
//login.component.html
<div class="text-center vertical-center">
<form>
<div class="horizontal">
<label for="">Email</label>
<input class="form-control" type="text" name="" value="">
</div>
<div class="horizontal">
<label for="">Password</label>
<input class="form-control" type="password" name="" value="">
</div>
<button class="btn btn-primary" (click)="navigate()">Login</button>
</form>
</div>
//login.component.ts
navigate() {
this.router.navigate(['./main']);
}
//main.component.html
<app-header></app-header>
<router-outlet></router-outlet>
//app.header.html
<ul class="nav navbar-nav">
<li class=""><a routerLink="/main/overview" routerLinkActive="active">OVERVIEW</a></li>
<li class=""><a routerLink="/main/insights" routerLinkActive="active">INSIGHTS</a></li>
</ul>
//overview.html
<p>This is overview section</p>
//insights.html
<p>This is insights section</p>
********Attempt 3 - Working**********
const appRoutes: Routes = [
{ path: 'main', component: MainComponent,
children: [
{ path: '', component: MainComponent },
{ path: 'overview', component: OverviewComponent },
{ path: 'insights', component: InsightsComponent },
]
},
{ path: 'login', component: LoginComponent },
{ path: '',
redirectTo: '/login',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
解决方案
So if I get the question right you want to have login screen initially and after the user logs in, you want him to see /main where navigation is shown. Both login screen and main application should have a different layout.
We have a similar case and using LayoutComponent. Here's simplified example.
// This is main component that get's bootstrapped that has 'top-level' router.
@Component({selector: 'app', template: '<router-outlet></router-outlet>'})
class AppComponent {}
// main router config
// Here AuthModule has router with login and logout configured and LoginGuard
// redirect the user to /auth/login when she is not authenticated.
// We're using lazy-loading but you can use direct component instead
export const APP_ROUTES: Routes = [
{path: '', redirectTo: 'main', pathMatch: 'full'},
{path: 'auth', loadChildren: '../modules/+auth/auth.module#AuthModule'},
{
path: '',
component: LayoutComponent,
canActivate: [LoginGuard],
children: [
{path: 'main', loadChildren: '../modules/+main/main.module#MainModule'}
]
}
];
// AuthModule/LoginComponent has own template and it will be rendered
// into 'top-level' router-outlet.
// LayoutComponent
// Here you define your main application layout that can include navigation
// and anything else that are global to the app. It has another router-outlet
// that get rendered when the layout is accessible (which in this case when the user is authenticated).
@Component({
selector: 'app-layout',
template: `
<div id="wrapper">
<app-sidebar></app-sidebar>
<div id="page-wrapper" class="gray-bg dashboard-1" adjust-content-height>
<router-outlet></router-outlet>
</div>
</div>
<notifications></notifications>
<error-modal></error-modal>
`
})
export class LayoutComponent {}
// Auth/LoginComponent can have its own template that will have different layout from the main application
So the flow would be like so:
- when the user tries to load / then she redirected to /main
- if the user is not authenticated she redirected to /auth/login else she loads /main
Hope that helps.
EDIT:Updated sickelap/ng-starter repository with example app that has:
- routing with lazy-loading
- layouts
- and other things
这篇关于如何在angular2中使用多个路由器插座?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!