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

问题描述

我将 root 路由定义为

const 路由:Routes = [{小路: ''，组件:HomeComponent},{路径:'模块1'，loadChildren: './module1/module1.module#Module1Module'},{小路: '**'，重定向到:''}];

module1.routing.ts 有:

const 路由:Routes = [{小路: ''，组件:SubModule1Component，孩子们: [{路径:'mod1child1'，组件:SubMod1Child1Component},{路径:'mod1child2'，组件:SubMod1Child2Component，孩子们: [{小路: ''，组件:Outlet1Component，出口:'出口1'},{路径:'newout1'，组件:Outlet1NewComponent，出口:'出口1'},{小路: ''，组件:Outlet2Component，出口:'出口2'，孩子们: [{路径:'childoutlet2'，组件:ChildOutlet2Component，出口:'出口2'}],},],},],canActivate: [AuthGuardService],}, ];

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

我上面图片的 HTML 页面是:

Child 2
<button [routerLink]="[{outlets: {'outlet1': ['newout1']}}]">更改插座 1</button><button [routerLink]="[{outlets: {'outlet2': ['childoutlet2']}}]">更改插座 2</button><div style="display: flex;"><div style="display: grid ;border: 1px 纯红色; width: 50%; height: 100px;float:left"><router-outlet name="outlet1"></router-outlet>

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

我无法加载

{ path: 'childoutlet2', component: ChildOutlet2Component , outlet: 'outlet2'}

点击:

<button [routerLink]="[{outlets: {'outlet2': ['childoutlet2']}}]">更改插座2</button>

我做错了什么.我试过

<button [routerLink]="['/module1/mod1child2',{outlets: {'outlet2': ['childoutlet2']}}]">更换插座 2</按钮>`

但这似乎不起作用

解决方案

我在 2 年前遇到过那个错误.

有一个拉取请求，你绝对应该 1) 签出，2) 点赞，这样它最终会被合并 https://github.com/angular/angular/pull/25483

我对此感到厌烦，不想重命名我的应用程序中的所有空路由以使其正常工作，因此我最终在 npm 之后从 postinstall 挂钩修补了该修复程序模块已被获取...

远非理想，但它确实有效，希望它可能在某个时候合并！

阴暗，但如果你也想走这条路，请查看我对公关的评论https://github.com/angular/angular/pull/25483#issuecomment-495249672

I have root routing defined as

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

the module1.routing.ts has:

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],
}, ];

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

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>

I am unable to load

{ path: 'childoutlet2', component: ChildOutlet2Component , outlet: 'outlet2'}

by clicking on :

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

What am I doing wrong. I tried

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

but this doesn't seem to work as well

解决方案

I've encountered that bug 2 years ago.

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

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!

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

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