Angulaire de redirection par défaut de la vue enfant

J'ai le parcours suivant la configuration, mais j'obtiens l'erreur Invalid configuration of route 'tenant': redirectTo and children cannot be used together

Une fois que j'ai cliqué /locataire je veux quelque sorte à afficher le contenu de deux locataires, suivi par l'audit ? Est-ce possible ? Mon locataire URL ressemble à ce qui suit http://localhost:8080/#/tenant

{
    path: 'tenant',
    redirectTo: '/tenant/(view:audit)', 
    pathMatch: 'full',
    component: TenantComponent,
    data: {
        authorities: ['ROLE_USER', 'ROLE_ADMIN'],
        pageTitle: 'tenant.home.title'
    },
    children: [
        {
            path: 'audit',
            component: PacketDataComponent,
            data: {
                authorities: ['ROLE_USER', 'ROLE_ADMIN'],
                pageTitle: 'tenant.home.title'
            },
        }
    ]
}
InformationsquelleAutor Saurabh Kumar | 2017-03-03
  1. 57

    vous pouvez utiliser un vide de l'enfant de l'itinéraire à la place : 

    {
    path: 'tenant',
    component: TenantComponent,
    children: [
        {
            path: '',
            pathMatch: 'full',
            redirectTo: 'audit'
        },
        {
            path: 'audit',
            component: PacketDataComponent,
            data: {
                authorities: ['ROLE_USER', 'ROLE_ADMIN'],
                pageTitle: 'tenant.home.title'
            },
        }
    ]
}
    • Ceci fonctionne même avec le module racine ou imbriqués les modules pour le chemin d'accès racine du module lors de la spécification de path: ''au lieu de path: 'tenant'.
    InformationsquelleAutor Bougarfaoui El houcine
  2. 1

    Voici ma configuration qui semble fonctionner ..

    import {RouterModule, Routes} from '@angular/router';
import {Route1Component} from './routes/route1/route1.component';
import {Route1DetailComponent} from './routes/route1/detail/route1-detail.component';
import {Route1ListComponent} from './routes/route1/list/route1-list.component';
import {Route2Component} from './routes/route2/route2.component';

const routes: Routes = [
  {
    path: 'route1',
    component: Route1Component,
    children: [
      {path: ':id', component: Route1DetailComponent},
      {path: '', component: Route1ListComponent}
    ]
  },
  {path: 'route2', component: Route2Component},
  {
    path: '',
    pathMatch: 'prefix',
    redirectTo: '/route1'
  }
];

export const routing = RouterModule.forRoot(routes);

    Projet .. https://github.com/danday74/angular2-coverage/blob/master/app/app.routes.ts .. si vous voulez avoir un sac autour de

    Heres un autre ..

    import {RouterModule, Routes} from '@angular/router';

import {ParentRouteComponent} from './routes/parent-route/parent-route.component';
import {ChildRoute1Component} from './routes/parent-route/child-route-1/child-route-1.component';
import {ChildRoute2Component} from './routes/parent-route/child-route-2/child-route-2.component';
import {HomeComponent} from './routes/home/home.component';
import {PageNotFoundComponent} from './routes/page-not-found/page-not-found.component';

export const routes: Routes = [
  {
    path: 'parent',
    component: ParentRouteComponent,
    children: [
      {
        path: '',
        component: ChildRoute1Component,
      },
      {
        path: ':id',
        component: ChildRoute2Component,
        data: {
          title: 'My title'
        }
      }
    ]
  },
  {
    path: '',
    component: HomeComponent
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];

export const routing = RouterModule.forRoot(routes);

    prises à partir de ..

    https://github.com/danday74/angular2-router-simple/blob/master/app/app.routes.ts

    Ici la ** route est la solution de secours et doivent être répertoriés dernier.

    InformationsquelleAutor danday74
  3. 0

    Je pense que vous devez déclarer la route deux fois, l'une avec le composant et l'autre avec le redirectTo. Ensuite dans les enfants de routes, dans le chemin, ne définissez pas le parent de l'itinéraire. Comme celles-ci:

    import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AuthGuard } from './auth.guard';

import { LoginViewComponent } from './views/login/login.cmp';
import { UserSearchViewComponent } from './views/userSearch/user-search.cmp';

import { SearchingByCriteriaViewComponent } from './views/userSearch/criteriaSearch/criteriaSearch.cmp';

import { InputsExampleViewComponent } from './views/inputsExample/example.cmp';

const routes: Routes = [
  { path: '',  component: LoginViewComponent },
  { path: 'busqueda',  redirectTo: 'busqueda/criterio', canActivate: [AuthGuard] },
  { path: 'busqueda',  component: UserSearchViewComponent, children: [
    { path: 'criterio', component: SearchingByCriteriaViewComponent, canActivate: [AuthGuard] }
  ] },
  { path: 'example',  component: InputsExampleViewComponent },
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
    InformationsquelleAutor Chema