redireccionar - El enrutamiento angular 2 se redirige a las rutas secundarias

rutas angular 6

Question

Soy un novato en Angular 2. Quiero crear módulos aislados para cada parte de mi aplicación. Por ejemplo, creé el AuthModule con componente predeterminado - AuthComponent que contiene una salida de enrutador para sus componentes secundarios (SignIn o SignUp). Entonces quiero darme cuenta de la siguiente situación:

1. Cuando navegue a / - root off app - redireccione a / auth
2. Después de redirigir a / auth, cargue AuthComponent con la salida del enrutador
3. Después de que se cargue AppComponent, cargue el componente de inicio de sesión predeterminado mediante el redireccionamiento a / auth / iniciar sesión

Pero cuando voy a localhost / me redirigen a / auth lo que quiero, pero el siguiente redireccionamiento al inicio de sesión no aparece.

Mi código: 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>

Resultado:

Entorno @ angular / cli: nodo 1.0.0-rc.2: 7.7.1 os: win32 x64

Answer 1

Entonces, lo que parece suceder es que cuando redirectTo:''auth'' , intenta cargar el '''' componente de los niños y, como no tiene ningún componente, el enrutador de salida está vacío.

Ahora parece que {path: '''', redirectTo: ''sign-in'', pathMatch: ''full''} no tiene otro propósito que redirigir para {path: '''', redirectTo: ''sign-in'', pathMatch: ''full''} sign-in así que simplemente puede redirigir a /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}
    ]
  },

];

o tiene un componente en su '''' ruta en lugar de redireccionar.

app.routes

const routes: Routes = [
  {path: '''', redirectTo: ''/auth'', pathhMatch: ''full''}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);

auth.routes

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

];

Answer 2

Es bastante simple:

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 3

He sido el mismo problema. Parece un truco angular: si elimina la barra diagonal en el campo ''redirigir a'', su aplicación se redireccionará con éxito a auth / iniciar sesión.

Use esto en app.routing:

const routes: Routes = [ 

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

];

El valor ''redirectTo'' comienza con una ruta ''/'' = absolute

El valor ''redirectTo'' comienza sin una ruta ''/'' = relativa

Obtenga más información al respecto: https://vsavkin.com/angular-router-understanding-redirects-2826177761fc

PD: Mi opinión es que tu estructura es más correcta que la de YounesM. El módulo principal no puede mantener las rutas secundarias: el módulo "aplicación" no sabe que el módulo "autenticación" tiene un módulo de inicio de sesión "hijo".