Estoy trabajando en un proyecto Angular que necesita mostrar diferentes formularios en cada página usando el enrutamiento Angular, pero dado que los formularios probablemente serán muy similares, estaba planeando tener un componente al que le pasaría accesorios
Es decir, tenga un componente de Form y un archivo json con todas las preguntas como form1.json que se usaría para generar automáticamente una interfaz
<Form questions="./form1.json" /> <Form questions="./form2.json" /> <Form questions="./form3.json" />Sé cómo usar el enrutamiento para crear una nueva ruta para un componente singular como este:
const routes: Routes = [ { path: 'form', component: Form } ];Sin embargo, esto solo crea una ruta para el componente Formulario en "www.formwebsite.com/form"
pero me preguntaba si era posible crear una nueva ruta para cada vez que llamé al componente Y hacer que la ruta tuviera una URL especificada por los datos pasados al componente.
IE haciendo <Form questions="./form1.json" /> aparecería como "www.formwebsite.com/form1", y haciendo <Form questions="./form2.json" /> aparecería en una ruta separada como "www.formwebsite.com/form2"
Soy bastante nuevo en Angular y esta es la primera vez que publico en el desbordamiento de pila, por lo que si la publicación es confusa o no incluye detalles, comente y especificaré cosas o agregaré más información.
Para que sus rutas cambien de nombre como desea cambiar su ruta a:
const routes: Routes = [ { path: '/:formName', component: Form } ];Esa sintaxis le permitirá tener nombres de URL 'dinámicos'. Dentro de su componente de formulario, puede obtener qué formName es haciendo esto:
...
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')); }Nota al margen: asegúrese de investigar la navegación de enrutamiento angular. docs Si estructura mal su navegación, puede resultarle un dolor de cabeza.
Otra nota al margen: puede consultar formularios reactivos angulares que permiten una validación de formulario fantástica: documentos de formulario