Angular 2 路由重定向到子路由 [英] Angular 2 routing redirect to with child routes
问题描述
我是 Angular 2 的新手.我想为我的应用程序的每个部分创建独立的模块.例如,我创建了带有默认组件的 AuthModule
- AuthComponent
,其中包含他的子组件(SignIn 或 SignUp)的 router-outlet
.所以我想实现以下场景:
- 当导航到/- root off app - 重定向到/auth
- 重定向到/auth 后 - 使用路由器插座加载 AuthComponent
- AppComponent 加载后 - 通过重定向到/auth/sign-in 加载默认登录组件
但是,当我转到 localhost/时,我将重定向到我想要的/auth,但是没有出现下一个登录重定向.
我的代码:app.routing
const 路由:路由 = [{小路: '',重定向到:'/auth',路径匹配:'完整'}];export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);
auth.routing
const 路由:路由 = [{路径:'认证',组件:AuthComponent,孩子们: [{小路: '',重定向到:'登录',路径匹配:'完整'},{路径:'登录',组件:登录组件}]},];export const authRouting: ModuleWithProviders = RouterModule.forChild(routes);
auth.component.html
<h1>身份验证组件</h1><路由器插座></路由器插座>
结果:
<块引用>环境@angular/cli:1.0.0-rc.2 节点:7.7.1 操作系统:win32 x64
我也遇到了同样的问题.这似乎是一个 Angular 技巧:如果您删除redirectTo"字段中的前导斜杠,您的应用程序将成功重定向到 auth/sign-in.
在 app.routing 中使用:
const 路由:路由 = [{path: '', redirectTo: 'auth', pathMatch: 'full'},];
‘redirectTo’值以‘/’开始=绝对路径
‘redirectTo’ 值开始时没有 ‘/’ = 相对路径
阅读更多相关信息:https://vsavkin.com/angular-router-understanding-redirects-2826177761fc
P.S 我认为你的结构比 YounesM 的结构更正确.父模块不能保留子路由:app"模块不知道auth"模块有子模块登录".
I am a newbie in Angular 2. I want to create isolated modules for every part of my app. For example I created the AuthModule
with default component - AuthComponent
which contain a router-outlet
for his child components (SignIn or SignUp). So I want to realise the following scenario:
- When navigate to / - root off app - redirect to /auth
- After redirect to /auth - load AuthComponent with router outlet
- After AppComponent loaded - load default sign-in component via redirecting to /auth/sign-in
But when I going to localhost/ I get redirect to /auth what I want, but the next redirect to sign-in doesn't appear.
My code:
app.routing
const routes: Routes = [
{
path: '',
redirectTo: '/auth',
pathMatch: 'full'
}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);
auth.routing
const routes: Routes = [
{
path: 'auth',
component: AuthComponent,
children: [
{
path: '',
redirectTo: 'sign-in',
pathMatch: 'full'
},
{
path: 'sign-in',
component: SignInComponent
}
]
},
];
export const authRouting: ModuleWithProviders = RouterModule.forChild(routes);
auth.component.html
<div class="container">
<h1>Auth component</h1>
<router-outlet></router-outlet>
</div>
Result:
Environment @angular/cli: 1.0.0-rc.2 node: 7.7.1 os: win32 x64
I have been the same problem. It seems an Angular tricks: If you remove leading slash in 'redirectTo' field, your application will be redirected successfully to auth/sign-in.
Use this in app.routing:
const routes: Routes = [
{path: '', redirectTo: 'auth', pathMatch: 'full'},
];
‘redirectTo’ value starts with a ‘/’ = absolute path
‘redirectTo’ value starts without a ‘/’ = relative path
Read more about it: https://vsavkin.com/angular-router-understanding-redirects-2826177761fc
P.S My opinion that your structure more correctly then YounesM's one. Parent module can't keep children routes: "app" module don't know that "auth" module have children module "sign-in".
这篇关于Angular 2 路由重定向到子路由的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!