it-swarm.com.de

Angular Umleitung zur standardmäßigen untergeordneten Ansicht

Ich habe die folgende Routenkonfiguration, erhalte jedoch den Fehler Invalid configuration of route 'tenant': redirectTo and children cannot be used together 

Nachdem ich/Mieter geklickt habe, möchte ich irgendwie den Inhalt beider Mieter anzeigen, gefolgt von einem Audit. Ist das möglich ? Meine Mieter-URL sieht folgendermaßen aus: 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'
            },
        }
    ]
}
10
Saurabh Kumar

sie können stattdessen eine leere untergeordnete Route verwenden: 

{
    path: 'tenant',
    component: TenantComponent,
    children: [
        {
            path: '',
            pathMatch: 'full',
            redirectTo: 'audit'
        },
        {
            path: 'audit',
            component: PacketDataComponent,
            data: {
                authorities: ['ROLE_USER', 'ROLE_ADMIN'],
                pageTitle: 'tenant.home.title'
            },
        }
    ]
}

Hier ist mein Setup, das zu funktionieren scheint ..

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

Projektieren Sie unter .. https://github.com/danday74/angular2-coverage/blob/master/app/app.routes.ts .., wenn Sie einen Abstecher haben möchten

Hier ist ein anderes ..

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

genommen von ..

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

Hier ist die **-Route der Fallback und sollte als letztes aufgelistet werden.

1
danday74

Ich denke, Sie müssen die Route zweimal deklarieren, eine mit der Komponente und eine andere mit dem redirectTo. Definieren Sie dann in untergeordneten Routen im Pfad nicht die übergeordnete Route. Wie diese:

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