在辅助路由中访问子级:角度 [英] Accessing children in auxiliary routing : Angular

问题描述

我将 root 路由定义为

const routes: Routes = [{
    path: '',
    component: HomeComponent
  },
  {
    path: 'module1',
    loadChildren: './module1/module1.module#Module1Module'
  },
  {
    path: '**',
    redirectTo: ''
  }
];

module1.routing.ts 具有:

const routes: Routes = [{
  path: '',
  component: SubModule1Component,
  children: [{
      path: 'mod1child1',
      component: SubMod1Child1Component
    },
    {
      path: 'mod1child2',
      component: SubMod1Child2Component,
      children: [{
          path: '',
          component: Outlet1Component,
          outlet: 'outlet1'
        },
        {
          path: 'newout1',
          component: Outlet1NewComponent,
          outlet: 'outlet1'
        },
        {
          path: '',
          component: Outlet2Component,
          outlet: 'outlet2',
          children: [{
            path: 'childoutlet2',
            component: ChildOutlet2Component,
            outlet: 'outlet2'
          }],
        },
      ],
    },
  ],
  canActivate: [AuthGuardService],
}, ];

当我按如下所示导航到/module1/mod1child2 时，此代码有效:

This code works when I navigate to /module1/mod1child2 as below:

我上面图片的HTML页面是

My HTML page for above image is:

<h1>Child 2</h1>

<button [routerLink]="[{outlets: {'outlet1': ['newout1']}}]">Change Outlet 1</button>
<button [routerLink]="[{outlets: {'outlet2': ['childoutlet2']}}]">Change Outlet 2</button>
<div style="display: flex;">
  <div style="display: grid	;border: 1px solid red; width: 50%;height: 100px;float:left">
    <router-outlet name="outlet1"></router-outlet>
  </div>

  <div style="display: grid	;border: 1px solid green; width: 50%;height: 100px;float:left">
    <router-outlet name="outlet2"></router-outlet>
  </div>
</div>

我无法加载

{路径:"childoutlet2"，组件:ChildOutlet2Component，出口:"outlet2"}

通过点击:

<按钮[routerLink] ="[{outlet:{'outlet2':['childoutlet2']}}]">更改出口2</button>

我在做什么错.我尝试过

What am I doing wrong. I tried

<button [routerLink]="['/module1/mod1child2',{outlets: {'outlet2': ['childoutlet2']}}]">
   Change Outlet 2
 </button>` 

但是这似乎不起作用

推荐答案

两年前，我遇到了该错误.

I've encountered that bug 2 years ago.

有一个拉取请求，您绝对应该1)签出，2)用thumbsup投票，以便最终合并 https://github.com/angular/angular/pull/25483

There's a pull request that you should definitely 1) check out, 2) upvote with a thumbsup so it eventually gets merged https://github.com/angular/angular/pull/25483

我对此感到非常厌倦，并且不想重命名我的应用程序中的所有空路由以使其正常工作，所以我最终在npm之后通过 postinstall 钩子修补了该修补程序模块已获取...

I was so tired of that and didn't want to rename all the empty routes within my app in order to have that working so I ending up patching that fix from a postinstall hook after the npm modules have been fetched...

远非理想，但它可以正常工作，希望它可以在某个时候合并！

Far from ideal but it just works and hopefully it might be merged at some point!

阴暗，但如果您也想这样做，请查看我对PR的评论 https://github.com/angular/angular/pull/25483#issuecomment-495249672

Shady, but if you want to go this way too, check my comment on the PR https://github.com/angular/angular/pull/25483#issuecomment-495249672

这篇关于在辅助路由中访问子级:角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！