带路由器插座的兄弟组件

Question

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

让我们假设我有一个像这样的应用程序结构......

现在在功能'C'组件html如下...

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

每个都有一个路由器插座，即功能'D'组件和功能'E'组件具有如下相同的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