angular动态路由

Angular 动态路由是指在运行时根据某些条件动态生成路由。这种方式可以让我们根据不同的场景动态地加载不同的组件或模块。

具体实现方法如下：

1. 在路由模块中声明需要动态生成的路由，但是不需要为它们指定具体的组件或模块。

2. 定义一个服务，该服务负责根据条件生成需要的路由。

3. 在组件中注入该服务，并调用服务中的方法生成路由。

4. 将生成的路由添加到路由器中。

下面是一个示例：

路由模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  // 动态生成的路由
  { path: '', pathMatch: 'full', redirectTo: 'home' },
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

动态路由服务：

import { Injectable } from '@angular/core';
import { Route } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class DynamicRoutesService {

  constructor() { }

  generateRoutes(): Route[] {
    const routes: Route[] = [
      { path: 'product', loadChildren: () => import('./product/product.module').then(m => m.ProductModule) }
    ];
    return routes;
  }
}

组件：

import { Component, OnInit } from '@angular/core';
import { Router, Route } from '@angular/router';
import { DynamicRoutesService } from './dynamic-routes.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>Dynamic Routes Demo</h1>
    <button (click)="generateRoutes()">Generate Routes</button>
  `,
})
export class AppComponent implements OnInit {

  constructor(
    private router: Router,
    private dynamicRoutesService: DynamicRoutesService
  ) { }

  ngOnInit() {
    // 初始化路由
    this.router.resetConfig([...this.router.config, ...this.dynamicRoutesService.generateRoutes()]);
  }

  generateRoutes() {
    // 动态生成路由
    const newRoutes: Route[] = this.dynamicRoutesService.generateRoutes();
    // 将生成的路由添加到路由器中
    this.router.resetConfig([...this.router.config, ...newRoutes]);
  }
}

在上面的示例中，我们定义了一个动态路由服务，该服务负责生成 `product` 路由，并将其添加到路由器中。在组件中注入该服务，并在 `ngOnInit` 生命周期钩子中调用服务中的方法生成路由。然后调用 `router.resetConfig()` 方法将生成的路由添加到路由器中。