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”中的 Form 組件創建了一個路由

但我想知道是否可以為每次調用組件時創建一個新路由並使路由具有由傳遞到組件的數據指定的 url？

IE 執行<Form questions="./form1.json" />將顯示為“www.formwebsite.com/form1”，而執行<Form questions="./form2.json" />將出現在單獨的路線上“www.formwebsite.com/form2”

我對 Angular 都很陌生，這是我第一次在堆棧溢出上發帖，所以如果帖子令人困惑或不包含細節，請發表評論，我會指定內容或添加更多信息

Answer 1

要讓您的路線更改名稱，就像您希望將路線更改為：

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

該語法將允許您擁有“動態”網址名稱。 在您的 Form 組件中，您可以通過執行以下操作獲取它是哪個 formName：

...

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'));
    }

旁注：確保您研究角度路由導航。 docs如果您的導航結構錯誤，可能會導致頭痛。

另一個旁注：您可能會研究 Angular Reactive 表單，它允許進行出色的表單驗證：表單文檔