带路由器插座的兄弟组件

Question

我从角度开始，我只是无法绕过路由器，这是我的问题....

让我们假设我有一个类似的应用程序结构......

现在进入功能＆＃39; C＆＃39;组件html如下......

<feature-d-component></feature-d-component>
<feature-e-component></feature-e-component>

每个人都有一个路由器插座，即功能＆＃39; D＆＃39;组件和功能＆＃39; E＆＃39;组件具有相同的html如下

<router-outlet></router-outlet>

这可以实施吗？ 如果可以，你能给出一个路由配置示例，还有一个例子，如何通过routerLink路由到这个？

Answer 1

是的，您所描述的内容可以通过命名路由器插座来实现。

为了证明这一点，我使用了您在图片中提供的示例应用程序。

示例路由器配置：

const appRoutes: Routes = [{   
    path: 'featureA',
      component: FeatureAComponent,
    }, {
      path: 'featureB',
      component: FeatureBComponent,
    },
    {
      path: 'featureC',
      component: FeatureCComponent,
      children: [
        { path: 'childE', component: EChildComponent, outlet: 'routeE' },
        { path: 'childD', component: DChildComponent, outlet: 'routeD' }
      ]
    },  { 
      path: '', 
      redirectTo: '/featureA',
      pathMatch: 'full'
   },
];

您的app.component.ts

@Component({
  selector: 'my-app',
  template: `
  <a [routerLink]="['featureA']">feature-a</a>
  <br>
  <a [routerLink]="['featureB']">feature-b</a>
  <br>
  <a [routerLink]="['featureC']">feature-c</a>
  <router-outlet></router-outlet>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

和您的功能C组件：

@Component({
  selector: 'feature-c',
  template: `
    <h1>Showing feature-c component</h1>
    <feature-d></feature-d>
    <feature-e></feature-e>
  `,
})
export class FeatureCComponent {
}

现在进入指定的路由器插座。你提到你想使用routerLink，所以这就是我在演示中使用的方法。见功能-d：

@Component({
  selector: 'feature-d',
  template: `
    <h3>feature-d</h3>
    <a [routerLink]="[{ outlets: { routeD: ['childD'] } }]">Show child D</a>
    <router-outlet name="routeD"></router-outlet>
  `,
})
export class FeatureDComponent {
}

为简单起见，Feature-e的实现与feature-d相同。 附件是我创建的现场StackBlitz演示，因此您可以在行动中看到它并根据自己的喜好随意播放。

警告我没有对StackBlitz进行任何美化，所以它看起来非常基本，但它完成了工作！

StackBlitz Demo