如何在 Angular 中自动路由到子路由

Question

我有一个由主应用程序路由器模块加载的相册模块。单击albums导航中的链接时，它会定向到albums加载空路径和一些子路由的模块。原因是分配给空路径的组件有自己的导航和路由器出口。该组件是AlbumContainer.

该模块也有一些子路由。但是，当我在主导航中单击 时albums，我希望它自动路由到子组件/路由之一 ( dates)。我知道可以将子路由 url 添加到主相册导航锚点，但这会阻止主导航routerLinkActive正常运行。

当我登陆这个模块/组件时，它是否有可能自动路由到该dates路径？

在所有其他情况下（在相册子菜单中），我将通过子菜单直接链接到子路线。

const routes: Routes = [
  {
    path: '',
    component: AlbumContainer,
    children: [
      {
        path: 'dates',
        loadChildren: () => import('./dates/dates.module').then((mod) => DatesModule)
      },
      {
        path: 'artists',
        loadChildren: () => import('./art/profile.module').then((mod) => mod.ArtistsModule)
      },
    ]
  },
];

HTML 供参考

<div>

  <!-- Sub Menu -->
  <div>
     <albums-menu></albums-menu>
  </div>

  <!-- Router Content -->
  <div>
    <router-outlet></router-outlet>
  </div>

</div>

Answer 1

将路由重定向到子路由

角度路由器将尝试将路由作为树进行匹配，这意味着您可以redirectTo通过将其实现为一组子路由的成员来使用相对于 UrlTree 中当前位置的位置。

设置

子路由容器

@Component({
  selector: 'app-outlet',
  template: `<router-outlet></router-outlet>`,
})
export class OutletComponent {}

应用程序组件.html

<router-outlet></router-outlet>

子组件

简单的虚拟组件，仅加入当前路径的 URL 并将其显示在其模板中：

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

@Component({
  selector: 'app-child',
  template: `{{routeInfo}}`,
})
export class ChildComponent {
  routeInfo: string = '';
  constructor(private r: ActivatedRoute) {
    r.url.subscribe((url) => {
      this.routeInfo = url.join(" ");
    });
  }
}

路线

const routes: Routes = [
  {
    path: '',
    component: OutletComponent,
    children: [{
      path: '',
      redirectTo: 'childB',
      pathMatch: 'full'
    },
    {
      path: 'childB',
      component: ChildComponent
    },
    {
      path: 'childA',
      component: ChildComponent
    }]
  }
];

Angular 将从 UrlTree 的根开始匹配。在这种情况下，如果我们位于根目录，它将检查子目录。

这里的技巧是，在子路由内部，我们还定义了一个带有重定向的空路由，但因为它是子路由，所以如果设置了 pathMatch，它将检查相对于其父路由的路由是否为空至满

/childB因此，在这个例子中，如果我们当前没有选择任何路线，我们将自动被重定向到。

Stackblitz：https://stackblitz.com/edit/angular-ivy-ygiwtn ?file=src/app/app.module.ts