web-dev-qa-db-fra.com

Redirection angulaire vers la vue enfant par défaut

J'ai la configuration de route suivante 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 souhaite afficher le contenu des deux locataires, suivi d'un audit? Est-ce possible ? L'URL de mon locataire 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'
            },
        }
    ]
}
angularangular2-routing
10
Saurabh Kumar

vous pouvez utiliser un itinéraire enfant vide à 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'
            },
        }
    ]
}
45
Bougarfaoui El houcine

Heres 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 vous attarder

En voici 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);

pris à partir de ..

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

Ici, la route ** est la solution de secours et devrait être listée en dernier.

1
danday74

Je pense que vous devez déclarer la route deux fois, une avec le composant et une autre avec le redirectTo. Ensuite, dans les itinéraires enfants, dans le chemin, ne définissez pas l'itinéraire parent. Comme ceux-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 { }
0
Chema