Question

我是Angular 2的新手。我想为我的应用程序的每个部分创建独立的模块。例如，我使用默认组件AuthComponent创建了AuthModule，其中包含其子组件（SignIn或SignUp）的路由器插座。所以我想实现以下场景：

导航到/ - root off app - 重定向到/ auth
重定向到/ auth后 - 使用路由器插座加载AuthComponent
加载AppComponent后 - 通过重定向到/ auth / sign-in加载默认登录组件

但是当我去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 os：win32 x64

Answer 1

我遇到了同样的问题。这似乎是一个角度技巧：如果您在“redirectTo”字段中删除了前导斜杠，您的应用程序将成功重定向到身份验证/登录。

在app.routing中使用它：

const routes: Routes = [ 

    {path: '', redirectTo: 'auth', pathMatch: 'full'}, 

];

'redirectTo'值以'/'=绝对路径

开头

'redirectTo'值在没有'/'=相对路径

的情况下开始

详细了解：https://vsavkin.com/angular-router-understanding-redirects-2826177761fc

P.S我认为你的结构比YounesM更正确。父模块不能保留子路径：“app”模块不知道“auth”模块有子模块“登录”。

Answer 2

所以，似乎发生的情况是当你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}
    ]
  },

];

Answer 3

这很简单：

const routes: Routes = [
    { path: '', redirectTo: '/auth/signin', pathMatch: 'full' },
    { path: 'auth', component: AuthComponent, 
        children: [
            { path: 'signup', component: SignupComponent }, 
            { path: 'signin', component: SigninComponent }, 
            { path: 'logout', component: LogoutComponent }
        ]
    },
    { path: '**', redirectTo: '/auth/signin', pathMatch: 'full' }
];

Answer 4

您可以在外部模块中使用重定向，如下所示：

# app/views/scores/_score.json.jbuilder
json.extract! score, :id, :score # etc...

json.course do
  json.name score.course.try(:name)
end


# app/views/scores/show.json.jbuilder
json.partial! 'scores/score', score: @score

你不需要一条空路径＆＃39;＆＃39;在您的子组件中，以防您希望使用正确的路径导航到此

Answer 5

您可以在自己的子路线中执行此操作：

const routes: Routes = [
  { path: 'auth', redirectTo: 'auth/signin'},
  {
    path: 'auth',
    component: AuthComponent,
    children: [{ path: 'signin', component: SignInComponent }],
  },
];

Answer 6

我遇到了同样的问题，但是以上答案似乎都不是一个好的解决方案。在我的代码中，我订阅了路由器事件并最终解决了该问题。

AuthComponent的构造函数中的

代码：

  this.router.events.subscribe((e: Event) => {
   if (e instanceof NavigationEnd) {
    this.activeUrl = e.urlAfterRedirects || e.url;
    if (this.activeUrl === '/auth') {
      this.router.navigateByUrl('/auth/sign-in');
    }
   }
  });

Answer 7

在身份验证路由上

    const routes: Routes = [
    {
            path: 'auth',
            redirectTo: 'auth/sign-in'
      },
    {
        path: 'auth',
        component: AuthComponent,
        children: [
          {path: 'sign-in', component: SignInComponent}
        ]
      },

    ];

Angular 2路由重定向到子路由

7 个答案: