如何在angular中创建动态路由（URL字符串）？

我有一个父组件

，在这个父组件中有几个按钮，每个按钮将在当前父组件的顶部打开一个新的浮动面板，在每个浮动面板中，有相同的按钮将在当前浮动面板的顶部再次打开浮动面板（面板堆叠）我希望每个浮动面板都有一个单独的URL，我将如何做到这一点？

在项目开始时，angular会询问您是否想要一个路由模块。如果您同意，它将在您的应用程序文件夹中创建。但是，如果出于某种原因您没有这样做，那么您仍然可以通过以下cli命令生成它：

ng generate module app routing--flat--module=app

这将为您提供类似以下内容的文件：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductAddComponent } from './product-add/product-add.component';
import { ProductGetComponent } from './product-get/product-get.component';
import { ProductEditComponent } from './product-edit/product-edit.component';

// here you can configure routes
const routes: Routes = [
  {
    path: 'product/create',
    component: ProductAddComponent
  },
  {
    path: 'products',
    component: ProductGetComponent
  },
  {
    path: 'edit/:id',
    component: ProductEditComponent
  }
];

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

只是别忘了在应用程序模块中引用它

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

之后，我们只需要在文件中添加更多的URL组件。欢迎使用SO！你能在你的问题上加上句号让其他人更容易理解你的问题吗？