使用多个路由器出口和子路由进行路由

Question

我运行在使用多个路由器插座时遇到麻烦。

我想同时使用2个路由器插座。这里组件的层次视图显示在哪个出口和哪个 url:

出口 1：应用列表 => url：/app
- 出口 2：应用程序详细信息（可选）=> url：/app/1
出口 1：srv-list => url：/srv
- 出口 2：srv-detail（可选）=> url：/srv/1

例如，当应用列表显示时，不应显示 srv-detail。

这是我的尝试（我已经尽可能地减少了我的代码）。浏览器控制台没有错误。 :( 我在操作命名路由器插座时感到困惑。

应用列表-component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-list',
  template: '<h2>AppList</h2>',
  styleUrls: []
})
export class AppListComponent {}

应用程序详细信息-component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-detail',
  template: '<h2>App Detail</h2>',
  styleUrls: []
})
export class AppDetailComponent {}

srv-list-component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'srv-list',
  template: '<h2>Srv list</h2>',
  styleUrls: []
})
export class SrvListComponent {}

srv-详细信息-component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'srv-detail',
  template: '<h2>Srv detail</h2>',
  styleUrls: []
})
export class SrvDetailComponent {}

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template:
    '<div><h1>Title 1</h1><router-outlet name="menu"></router-outlet></div>' +
    '<div><h1>Title 2</h1><router-outlet name="content"></router-outlet></div>',
  styleUrls: []
})
export class AppComponent {
  /* In future, by subscribing to the router, we will be able to hide the content
  outlet if there is only one '/' in the route (eg. /app and not /app/3) */
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { AppListComponent } from './app-list.component';
import { AppDetailComponent } from './app-detail.component';
import { SrvListComponent } from './srv-list.component';
import { SrvDetailComponent } from './srv-detail.component';

const routes : Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'app'
  },

  {
    path: 'app',
    component: AppComponent,
    children: [
      {
        path: '',
        component: AppListComponent,
        outlet: 'menu'
      },
      {
        path: ':id',
        component: AppDetailComponent,
        outlet: 'content'
      }
    ]
  },

  {
    path: 'srv',
    component: AppComponent,
    children: [
      {
        path: '',
        component: SrvListComponent,
        outlet: 'menu'
      },
      {
        path: ':id',
        component: SrvDetailComponent,
        outlet: 'content'
      }
    ]
  }
]

@NgModule({
  declarations: [
    AppComponent,
    AppListComponent,
    AppDetailComponent,
    SrvListComponent,
    SrvDetailComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

你们有什么想法吗？谢谢。

编辑：plunker.

Answer 1

我运行遇到问题运行你的项目，但我稍后会再试一次。如果你有任何 Plunker 或 git 那就太好了。

我希望您尝试的一件事是从每个路由中删除子数组之前的组件属性和值。

path: 'srv',
component: AppComponent,<--this one on each route
children: [...]

由于路由只从确切的路由获取它应该加载的组件，因此在子级别上声明

如果有帮助，请告诉我，我稍后会尝试探索更多内容。

编辑：

这是固定路线：

const routes : Routes = [
  {
    path: '',
    pathMatch: 'full',

    /* Below is just a test because there is some issues
    with punkler and url changing */
    //redirectTo: 'app', //Does work
    redirectTo: 'app/3', //Does not work
    //redirectTo: 'srv', //Does work
    //redirectTo: 'srv/3', //Does not work
  },
  {
    path: 'app',
    children: [
      {
        path: '',
        outlet: 'menu',
        component: AppListComponent
      },
      {
        path: ':id',
        children:[
          {
            path:'',
            outlet: 'content',
            component: AppDetailComponent,
          }
        ]
      }  
    ]
  },
  {
    path: 'srv',
    children: [
        {
          path:'',
          component: SrvListComponent,
          outlet: 'menu',
        },
        {
          path: ':id',
          children:[
            {
              path:'',
              component: SrvDetailComponent,
              outlet: 'content'
            }
          ]
        }
    ]
  }
];

请记住，每条可能有另一个级别的路线都应包含具有 1 个对象的子级，路径为：""，这意味着它本身和 n [=] 的其他对象38=]n 路径

您的用例示例：

const routes = [{
path: 'app',
children: [
   //self route -> /app
  {
    path: '',
    outlet: 'menu',
    component: AppListComponent
  },
  {
    //still not saying there is /app/:id route
    path: ':id',
    children:[
      {
      //declaration for /app/:id route
        path:'',
        outlet: 'content',
        component: AppDetailComponent,
      }
    ]
  }  
]
}]

编辑 2：

路由器插座要求

应用程序仍然会抛出一些错误，因为您没有任何无名路由器插座，这必须在您的 html 中。因此，您应该用无名路由器插座替换 content/menu 路由器插座，或者添加另一个路由器插座。

无名路由器插座：

<router-outlet></router-outlet>

使用多个路由器出口和子路由进行路由

Routing with multiple router-outlet and child routes

angular2-routing

angular

编辑：

您的用例示例：

编辑 2：

路由器插座要求