Question

我有以下路由配置，但收到错误Invalid configuration of route 'tenant': redirectTo and children cannot be used together

一旦我点击/租户，我想以某种方式显示两个租户的内容，然后审核？这可能吗？我的租户网址如下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'
            },
        }
    ]
}

Answer 1

您可以使用空子路线：

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

Answer 2

继承我的设置似乎有用..

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

项目在.. https://github.com/danday74/angular2-coverage/blob/master/app/app.routes.ts ..如果你想要捅一下

另一个人......

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

取自..

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

此处**路线是后备路线，应该列在最后。

Answer 3

我认为您必须声明路由两次，一次使用组件，另一次使用redirectTo。然后，在子路径中，不要在路径中定义父路径。像这样：

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 { }

角度重定向到默认子视图

3 个答案: