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

Question

使用多个路由器插座时遇到麻烦。

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

• outlet 1：app-list =＆gt;网址：/ app
  • outlet 2：app-detail（可选）=＆gt; url：/ app / 1
• outlet 1：srv-list =＆gt; url：/ srv
  • outlet 2：srv-detail（可选）=＆gt; url：/ srv / 1

例如，当app-list为时，不应显示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一览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 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中。因此，您应该将内容/菜单路由器插座替换为无名路由器或添加另一个路由器插座。

无名路由器：

<router-outlet></router-outlet>