Angular 如何使用独立组件在ANGLE(16+)中实现嵌套布线

更新

如果你不想走独立的路由，你需要用角形classic 的布线方法配合模块布线，最重要的一点是我们需要在布线中使用component，如果我们使用loadComponent，那么组件必须是独立的组件！

两个模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TwoComponent } from './two.component';
import { ThreeComponent } from './three/three.component';
import { FourComponent } from './four/four.component';
import { TwoRoutingModule } from './two.routing.module';

@NgModule({
  imports: [CommonModule, TwoRoutingModule, CommonModule],
  declarations: [TwoComponent, ThreeComponent, FourComponent],
})
export class TwoModule {}

两个路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FourComponent } from './four/four.component';
import { ThreeComponent } from './three/three.component';
import { TwoComponent } from './two.component';

const twoRoutes: Routes = [
  {
    path: '',
    component: TwoComponent,
    children: [
      {
        path: 'three',
        component: ThreeComponent,
      },
      {
        path: 'four',
        component: FourComponent,
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(twoRoutes)],
  exports: [RouterModule],
})
export class TwoRoutingModule {}

stackblitz个

问得好！

我认为你只需要在根级别提供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),
    },
  ];
}

working stackblitz个