我是Angular 2的新手。我想为我的应用程序的每个部分创建独立的模块。例如,我使用default AuthModule
- AuthComponent
创建了组件,其中包含他的子组件(SignIn或SignUp)的router-outlet
。因此,我想要实现以下场景:
但是当我转到localhost/时,我会重定向到我想要的/auth,但是下一个重定向到登录没有出现。
我的代码: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>
结果:
环境@angular/cli: 1.0.0-rc.2节点: 7.7.1操作系统: win32 x64
发布于 2017-05-02 19:46:09
我也遇到过同样的问题。这似乎是个小把戏:如果你去掉了'redirectTo‘字段中的前导斜杠,你的应用程序将被成功地重定向到身份验证/登录。
在app.routing中使用此命令:
const routes: Routes = [
{path: '', redirectTo: 'auth', pathMatch: 'full'},
];
‘redirectTo’值以‘/’=绝对路径开头
‘redirectTo’值开始时不带‘/’=相对路径
阅读更多关于它的信息:https://vsavkin.com/angular-router-understanding-redirects-2826177761fc
附注:我认为你的结构比尤内斯M的结构更正确。父模块不能保持子路由:"app“模块不知道"auth”模块有子模块"sign-in“。
发布于 2018-12-18 03:51:50
在auth.routes
上
const routes: Routes = [
{
path: "auth",
redirectTo: "auth/sign-in"
},
{
path: "auth",
component: AuthComponent,
children: [{ path: "sign-in", component: SignInComponent }]
}
];
发布于 2017-03-18 23:03:14
因此,可能发生的情况是,当您执行redirectTo:'auth'
操作时,它会尝试加载''
子组件,并且由于它没有任何组件,所以路由器插座是空的。
现在看起来{path: '', redirectTo: 'sign-in', pathMatch: 'full'}
没有任何其他用途了,那么重定向到sign-in
就可以了,所以你可以直接重定向到/auth/sign-in
。
app.routes
const routes: Routes = [
{path: '', redirectTo: '/auth/sign-in', pathMatch: 'full'}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);
auth.routes
const routes: Routes = [
{
path: 'auth',
component: AuthComponent,
children: [
{path: 'sign-in', component: SignInComponent}
]
},
];
或者在您的''
路径中添加一个组件,而不是重定向。
app.routes
const routes: Routes = [
{path: '', redirectTo: '/auth', pathMatch: 'full'}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);
auth.routes
const routes: Routes = [
{
path: 'auth',
component: AuthComponent,
children: [
{path: '', component: SignInComponent}
]
},
];
https://stackoverflow.com/questions/42874859
复制相似问题