如何使用独立组件在 Angular（16+）中实现嵌套路由

Question

我想使用两个单独的路由配置和两个路由器出口来实现嵌套路由。但是，我遇到了一个问题，即无法在路由器出口本身加载的独立组件中提供路由。

我希望在不（如果可能）将所有路由器路径添加到我的应用程序路由的情况下实现什么：

我尝试为我的组件（两个组件，请参阅上图）提供路由，该组件加载到路由器出口本身内：

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule, Routes, provideRouter } from '@angular/router';

export const twoRoutes: Routes = [
    {
        path: 'three',
        loadComponent: () => import('./three.component').then(a => a.ThreeComponent),
    },
    {
        path: 'four',
        loadComponent: () => import('./four.component').then(a => a.FourComponent),
    },
];

@Component({
    selector: 'app-two',
    standalone: true,
    imports: [CommonModule, RouterModule],
    providers: [provideRouter(twoRoutes)],
    template: `
        <div>Hello Component TWO</div>
        <router-outlet></router-outlet>
    `,
    styles: ``,
})
export class TwoComponent {}

错误：

我希望有一种方法可以在独立组件中定义嵌套路由，而不必将所有这些路由器路径添加到我的应用程序路由和子级中。

更新： 我使用

loadChildren

发现了以下工作，但我个人不喜欢这个，因为这需要我更新应用程序路由，使其了解嵌套路由：

import { Routes } from '@angular/router';

export const routes: Routes = [
    {
        path: 'one',
        loadComponent: () => import('./one.component').then(a => a.OneComponent),
    },
    {
        path: 'two',
        loadComponent: () => import('./two.component').then(a => a.TwoComponent),
        loadChildren: () => import('./two.component').then(t => t.twoRoutes),
    },
];

Answer 1

非常好的问题！

我认为您只需要在根级别提供

provideRouter

，所有其他导入都是使用

loadChildren

派生的，请在下面找到工作示例以供参考。通过这种方法，所有组件都需要是独立的，如果需要，您也可以使用模块。

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { RouterModule, Routes, provideRouter } from '@angular/router';

export const routes: Routes = [
  {
    path: 'one',
    loadComponent: () =>
      import('./one/one.component').then((a) => a.OneComponent),
  },
  {
    path: 'two',
    loadComponent: () =>
      import('./two/two.component').then((a) => a.TwoComponent),
    loadChildren: () =>
      import('./two/two.component').then((t) => {
        console.log(t.TwoComponent.twoRoutes);
        return t.TwoComponent.twoRoutes;
      }),
  },
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule],
  template: `
  <a routerLink="/one">one</a> | 
  <a routerLink="/two">two</a>
    <router-outlet></router-outlet>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App, {
  providers: [provideRouter(routes)],
});

两部分

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule, Routes, provideRouter } from '@angular/router';

@Component({
  selector: 'app-two',
  template: `
  <br/>
  <a routerLink="./three">three</a> | 
  <a routerLink="./four">four</a>
  <div>Hello Component TWO</div>
  <router-outlet></router-outlet>
  `,
  standalone: true,
  imports: [CommonModule, RouterModule],
  providers: [],
  styleUrls: ['./two.component.css'],
})
export class TwoComponent {
  static twoRoutes: Routes = [
    {
      path: 'three',
      loadComponent: () =>
        import('../three/three.component').then((a) => a.ThreeComponent),
    },
    {
      path: 'four',
      loadComponent: () =>
        import('../four/four.component').then((a) => a.FourComponent),
    },
  ];
}

工作堆栈闪电战