Angular 2 маршрутизация перенаправляется с помощью дочерних маршрутов

Я новичок в Angular 2. Я хочу создать изолированные модули для каждой части моего приложения. Например, я создал AuthModule с компонентом по умолчанию - AuthComponent, который содержит выход маршрутизатора для его дочерних компонентов (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>

Результат:

code

result

Окружающая среда @angular/cli: 1.0.0-rc.2 node: 7.7.1 os: win32 x64

Ответы

Ответ 1

У меня была та же проблема. Похоже, трюки Angular: Если вы удалите главную косую черту в поле "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" имеет дочерний модуль "вход".

Ответ 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}
    ]
  },

];

Ответ 3

Вы можете использовать перенаправление в вашем внешнем модуле, например так:

// Root routing module or app.routing.module
const routes: Routes = [
  {path: '', redirectTo: '/auth', pathMatch: 'full'},
  {path: 'auth', redirectTo: '/auth/sign-in', pathMatch: 'full'}
];

// Child routing module or child.routing.module
const routes: Routes = [
 {
   path: 'auth',
   //component: AuthComponent, may not need this as you only need the template
   children: [
     {path: 'sign-in', component: SignInComponent}
   ]
 },
];

Вам не нужно иметь пустой путь в дочернем компоненте, если вы хотите перейти к нему с правильным путем

Ответ 4

Это довольно просто:

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' }
];

Ответ 5

Вы можете сделать это по вашему детскому маршруту:

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

Ответ 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');
    }
   }
  });

Ответ 7

на auth.routes

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

    ];