Enrutamiento en Angular

Esta lección va a demostrar como pasar y recuperar los valores de los parámetros del enrutador angular. Entonces, la aplicación que tengo aquí se generó con enrutamiento con el Herramienta CLI. Entonces este archivo de módulo de enrutamiento ya está configurado y importado en el módulo de ruta de la aplicación. El módulo de enrutador que se importa de angular aquí incluye diferentes directivas y proveedores que permiten navegación de la aplicación. Esto incluye el enlace del enrutador, el enlace del enrutador activo y el directivas de salida del enrutador, así como el servicio del enrutador. Entonces, para esta demostración, digamos que está creando una aplicación web para una empresa inmobiliaria. Una de las funciones que puede necesitar es una página que enumera los propiedades disponibles, y luego hacer clic en esa lista de propiedades debería llevar al usuario a una página con más detalles sobre esa propiedad en particular. Entonces, para configurar eso, Primero voy a generar un componente que muestra una lista. de las propiedades y luego un componente que mostrará el detalles de nuestra propiedad. Así que aquí el componente de la lista de elementos será para mostrar todos los listados y el componente del artículo será para mostrar un listado individual. También voy a generar un componente para que actúe como página de inicio. Ahora, para crear rutas para esos tres componentes, Primero tengo que importarlos a este módulo de enrutamiento de la aplicación expediente. A continuación, aquí abajo, y las rutas son correctas. Primero definiré una ruta para la página de inicio. Y luego, a continuación, crearé una ruta para la lista de elementos. componente. Ahora, para el componente del artículo, Necesito pasar la identificación del artículo en la ruta. De esta forma, si esta aplicación se adjuntó a un back-end, podría usar esa identificación para recuperar los datos de la lista, de la base de datos. Para denotar un parámetro en una ruta, ponga dos puntos delante del nombre del parámetro. De esta manera, el enrutador angular sabe que este es un parámetro que va a ser pasado. Y no intenta hacer coincidir la ruta con la identificación de la palabra. Cuando busca una ruta coincidente. Y ese valor de parámetro se pasará en el enlace Cuando un usuario hace clic en un elemento específico de la lista. Dado que no existe un back-end real para esta aplicación, Creé un servicio que devolverá algunos datos simulados básicos solo con fines de demostración. Hay dos funciones definidas en el servicio. Uno que devuelve todos los datos de la lista y uno que toma un ID y devuelve esos datos de listado en particular. Y para terminar de configurar ese enrutador. También necesito agregar la salida del enrutador. Así que abriré la plantilla del componente de ruta y elimine todo el código de inicio y luego reemplácelo con esa salida del enrutador. Así que ahora que hay una salida para mostrar las rutas en el vista, Voy a crear un enlace desde el componente de la página de inicio a ese componente de la lista. Ahora para crear un enlace para el enrutador angular, no desea utilizar el atributo H-ref. Esta es una aplicación de una sola página, por lo que no queremos navegar a una nueva página HTML. En lugar de, se utiliza la directiva de enlace de enrutador.