两个带有孩子和名称的路由器插座无法导航答案

【问题标题】：Two router-outlets with children and name not navigating两个带有孩子和名称的路由器插座无法导航
【发布时间】：2020-12-24 15:26:13
【问题描述】：

我正在尝试使用name 创建router-outlet。我正在使用两个路由器插座，一个用于主路由，另一个用于自定义路由一个子路由。当我尝试导航到时，我会到达 RouterNotFoundComponent：

http://localhost:64413/RouterMain/(RouterMainChild:FirstComponent)
http://localhost:64413/RouterMain/(RouterMainChild:SecundComponent)

但是，当我刷新它在NavMenuComponent 中呈现的FirstComponent 页面时，它重定向到RouterNotFoundComponent 之后的奇怪事情是它应该是的！

app.module.ts:

imports: [
    RouterModule.forRoot([
      { path: '', component: HomeComponent },
      {
        path: 'RouterMain', component: NavMenuComponent
        , children: [
          { path: 'FirstComponent', component: FirstComponent, outlet: 'RouterMainChild' },
          { path: 'SecundComponent', component: SecundComponent, outlet: 'RouterMainChild' }
        ]
      },
      { path: '**', component: RouterNotFoundComponent }

    ]
    ),

app.component.html

<router-outlet></router-outlet>

home.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `
    <button routerLink="/RouterMain"> Router Main</button>
  `,
})
export class HomeComponent {
}

导航菜单.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { ThemePalette } from '@angular/material/core';

@Component({
  selector: 'app-nav-menu',
  templateUrl: './nav-menu.component.html',
  styleUrls: ['./nav-menu.component.css']
})
export class NavMenuComponent {


  navLinks: any[];
  activeLink: any;

  constructor(private router: Router) {

    this.navLinks = [
      {
        label: 'FirstComponent',
        link: './(RouterMainChild:FirstComponent)',
        index: 0
      }, {
        label: 'SecundComponent',
        link: './(RouterMainChild:SecundComponent)',
        index: 1
      },
    ];

    this.activeLink = this.navLinks[0].link;

  }
}

导航菜单.component.html

  <nav mat-tab-nav-bar>
     <a mat-tab-link
       *ngFor="let link of navLinks"
       [routerLink]="link.link"
       (click)="activeLink = link.link"
       [active]="activeLink == link.link">
       {{link.label}}
    </a>
</nav>

<router-outlet name="RouterMainChild"></router-outlet>

【问题讨论】：

尝试改成这样：链接：'./RouterMainChild/SecundComponent'，或者没有点：链接：'/RouterMainChild/SecundComponent'，
@TomaszVizaint 导航到 RouterNotFoundComponent 的结果相同
尝试在 link: '/FirstComponent' 中执行此操作 nav-menu.component.ts 并在其他链接中执行此操作
@Kardon63 尝试了link: '/FirstComponent' 和link: './FirstComponent' 相同的结果，它导航到RouterNotFoundComponent
路由器链接按顺序搜索，找到第一个匹配的。所以以 '' 开头总是会导航到那里，除非你给它属性pathMatch: 'full'

标签： angular angular-material

【解决方案1】：

如果有人遇到同样的问题，我找到了解决方法：

在nav-menu.component.html 中更改这一行：

   [routerLink]="link.link"

收件人：

 [routerLink]="['./', { outlets: { RouterMainChild: link.link } }]"

在nav-menu.component.ts 中，导航链接将如下所示：

this.navLinks = [
  {
    label: 'FirstComponent',
    link: 'FirstComponent',
    index: 0
  }, {
    label: 'SecundComponent',
    link: 'SecundComponent',
    index: 1
  },
];

如果您希望选项卡的选择基于当前路径添加：

  this.router.events.subscribe((res) => {
  this.activeLink = this.navLinks.find(tab => tab.link == this.router.url.substring(this.router.url.indexOf(':') + 1, this.router.url.length - 1)).link;
});

如果你想跟踪后退和前进按钮：

 router.events
  .subscribe((event: NavigationStart) => {
    if (event.navigationTrigger === 'popstate') {
        this.activeLink = this.navLinks.find(tab => tab.link == event.url.substring(this.router.url.indexOf(':') + 1, event.url.length - 1)).link;
    } 
  });

【讨论】：