Angular 12 每次调用组件时创建一个新的Angular路由

Question

我正在开发一个 Angular 项目，该项目需要使用 Angular 路由在每个页面上显示不同的表单，但由于表单可能非常相似，所以我计划只拥有一个组件我会将道具传递给

即，有一个 Form 组件和一个 json 文件，其中包含所有问题，例如 form1.json 将用于自动生成前端

<Form questions="./form1.json" />
<Form questions="./form2.json" />
<Form questions="./form3.json" />

我知道如何使用路由为单个组件创建新路由，如下所示：

const routes: Routes = [
  { path: 'form', component: Form }
];

但是，这只是在“www.formwebsite.com/form”

处为表单组件创建了一个路由

但我想知道是否有可能在我每次调用组件时创建一个新路由并使路由具有由传递到组件的数据指定的 url？

IE 执行 <Form questions="./form1.json" /> 将显示为“www.formwebsite.com/form1”，执行 <Form questions="./form2.json" /> 将显示为“www.formwebsite” .com/form2

我对 Angular 都很陌生，这是我第一次 post 处理堆栈溢出，所以如果 post 令人困惑或不包含详细信息，请发表评论我会指定内容或添加更多信息

Answer 1

要让您的路线像您想要的那样更改名称，请将您的路线更改为：

const routes: Routes = [
  { path: '/:formName', component: Form }
];

该语法将允许您拥有 'dynamic' url 个名称。在您的表单组件中，您可以通过以下方式获取它的表单名称：

...

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    this.route.params.subscribe((params: Params) => {
        console.log(params.formName); // same as :formName in route
    });
    // or
    console.log(this.route.snapshot.paramMap.get('formName'));
    }

旁注：确保研究 angular 路由导航。 docs 如果导航结构错误，可能会让人头疼。

另一个旁注：您可以查看 Angular 响应式表单，它允许进行出色的表单验证：form docs

Angular 12 每次调用组件时创建一个新的Angular路由

Angular 12 Create a new Angular route every time a component is called

angular-routing

angular