角度命名的路由器插座不显示组件答案

【问题标题】：angular named router-outlet doesn't display component角度命名的路由器插座不显示组件
【发布时间】：2019-04-04 16:46:00
【问题描述】：

我试图在我的主路由器插座内的命名插座内显示component。我有一个组件：calculateur.component.ts，其中有一个button 和这个router link：

[routerLink]="['/',{ outlets: { resultats: 'synthese' } }]"

这里是路由配置：

{

path: "indicateur",

    component: IndicateurComponent,
    children: [
      {
        path: "",
        redirectTo: "absenteisme",
        pathMatch: "prefix"
      },
        path: "calculateur",
        component: CalculateurComponent,
        children: [
          {
            path: "synthese",
            component: SyntheseComponent,
            outlet: "resultats"
          },
          {
            path: "cout-direct",
            component: CoutDirectComponent,
            outlet: "resultats"
          },
          {
            path: "cout-indirect",
            component: CoutIndirectComponent,
            outlet: "resultats"
          }
        ]
      },

当我点击它时，网址变为：http://localhost:4200/#/indicateur/calculateur(resultats:synthese)，但屏幕上什么也没有发生。

我不确定导致上述行为的问题。

【问题讨论】：

认为您的路由错误，看起来它在 IndicateurComponent 上期待您的命名路由器插座，您能否尝试在该组件上添加命名路由器插座而不是您放置它的位置。
您的意思是我必须将命名的路由器插座放在父组件上？因为我真的很想在计算器组件上使用它。你能帮我强调一下我的路由器配置有什么问题吗？

标签： angular

【解决方案1】：

routerLink 应该在您的IndicateurComponent 的模板上（您可能将其命名为indicateur.component.html）而不是CalculateurComponent。

另外，请务必将您的 router-outlet 添加到您的 IndicateurComponent。

【讨论】：