Qué hace el router en Angular 4

Resumen

El routing en Angular 4 nos permite implementar navegación en nuestra aplicación, podemos asignar vistas/componentes específicos para cada url que deseemos. Routing nos permite enviar y recibir parámetros.

Alejandro Mora

student•

Yo cree un archivo app.routing.ts y dentro de el coloque.

import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';

const APP_ROUTES: Routes = [
  {path: '', component: AppComponent, pathMatch: 'full' },
  { path: 'places', component: AppComponent }
];

export const Routing = RouterModule.forRoot(APP_ROUTES);

Y dentro de app.module.ts agregue.

import { Routing } from './app.routing';

Y queda mas ordenado.

Mariano Villarreal

student•

es la mejor forma, así esta todo mas organizado

Alain Noda Sanchez

student•

La mejor practica es crear un modulo exclusivo para ruteo ya que al momento de importar te va a generar conflicto anexo la documentación: https://angular.io/tutorial/toh-pt5

Nathaly Stefani Riaño Bejarano

student•

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

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

const ROUTES: Routes = [
  { path: '', component: AppComponent, pathMatch: 'full' },
  { path: 'lugares', component: AppComponent }
];

@NgModule({
  exports: [ RouterModule ]
})

export class AppRoutingModule { }

Mario Alejandro Cortez Salinas

student•

Hola en la parte del app.module.ts ¿que pusiste? yo hice eso mismo pero ahora no se como importarlo

Eduardo Rahn

student•

Si lo hiciste con el CLI, y miras tu app.module.ts, debes ver ya importado lo siguiente:
import { AppRoutingModule } from ‘./app-routing.module’;

Y en el arreglo de imports se debio agregar

AppRoutingModule

Todo de manera automatica

Mauricio Hernan Cabrera

student•

Tambien se podria hacer de esta manera el ruteo, para evitar cualquier tipo de conflicto con routerLinkActive

const appRoutes: Routes = [
  { path: '', redirectTo: '/lugares', pathMatch: 'full' },
  { path: 'lugares', component: AppComponent }
];

Christian Pastor Hernandez Hernandez

student•

si tienen problemas con el ruoterModule visiten la pagina de angular, muchas cosas ya se han modificado. https://angular.io/guide/router

Víctor Hugo Rivas Sánchez

student•

Importar módulo Router

import { Routes } from "@angular/router";

Definir las rutas del proyecto en el módulo:

const appRoutes: Routes = [
  {path: '', component: AppComponent},
  {path: 'lugares', component: AppComponent}
];

Carlos Uriel de Jesus Sánchez González

student•

Router
-Permite implementar navegación en nuestra app
-Podemos asignar vistas/componentes específicos para cada url que se desee
-Pueden recibir parámetros
const appRoutes : Routes = [
{path: ‘’, redirectTo : ‘prueba’,pathMatch: ‘full’},
{path: ‘prueba’, component : PruebaComponent}
]

Cristian Palta

student•

buenas clases

Juan Gomez

student•

Buenos días a todos,

Juan Gomez

student•

Tengo un problema con el tema del router en angular, tengo solo dos páginas inicio y contacto. Cunado entra la aplicación entra perfecto, me voy a contacto y me funciona bien, pero cuando vuelvo a inicio no carga una parte que son los slider o course. Estos slider los manejo con archivo JavaScript propio. Alguien me puede ayudar. Muchas gracias.

ANA KAREN VELASCO SOTO

student•

Hola! tengo un problema con las rutas, se duplica el componente en la parte de arriba o abajo de otro. Captura de Pantalla 2020-03-02 a la(s) 18.06.55.png

export const AppRoutes: Routes = [
    {path : '' , redirectTo: '/welcome', pathMatch:'full' },
    {path: 'welcome', component : WelcomeComponent} ,
{path: 'about', component: AboutComponent},
{path : 'tips', component:TipsComponent},
{path : 'q1', component: Q1Component},
{path : 'fin', component: FinComponent}
];