¿Cómo navegar a otra página en angular 6?

Esta es la respuesta más acertada que encomtrarás brindar, pero estúdiala pausadamente y valora si se adapta a tu trabajo.

Solución:

@sasi… prueba así,

  Submit 

Actualizar :

Para usar el enrutamiento en su aplicación, debe registrar los componentes que permiten que el enrutador angular represente la vista.

Necesitamos registrar nuestros componentes en App Module o cualquier Feature Module de él (su módulo de trabajo actual) para enrutar a la vista de componentes específicos.

Podemos registrar componentes de dos formas

1. .forRoot(appRoutes) para el registro de componentes a nivel de aplicación como
   featuteModules(por ejemplo, Gestión de usuarios) y components en el que quieres registrarte root level.

2. .forChild(featureRoutes) para módulos de características child components(Ej. Eliminación de usuario, Actualización de usuario).

   puede registrar algo como a continuación,

     const appRoutes: Routes = [
          path: 'user', loadChildren: './user/user.module#UserModule' ,
          path: 'heroes', component: HeroListComponent ,
      ];
   
     @NgModule({
       imports: [
       BrowserModule,
       FormsModule,
       RouterModule.forRoot(
         appRoutes
       )
     ],
   

PD: Para navegar de un componente a otro, debe incluir el RouterModule en Importaciones de Módulos correspondientes array desde @angular/router paquete.

Puede navegar de una a otra página en Angular de dos maneras. (ambos son iguales en el nivel de envoltura, pero la implementación de nuestro lado es diferente).

directiva de enlace de enrutador

routerLink la directiva le da una coincidencia de ruta absoluta como navigateByUrl() de Router clase.

  Submit 

Si utiliza dynamic values para generar el enlace, puede pasar un array de segmentos de ruta, seguido por el params para cada segmento.

Por ejemplo routerLink=['/team', teamId, 'user', userName, details: true] significa que queremos generar un enlace a /team/11/user/bob;details=true.

Hay algunos puntos útiles para recordar cuando estamos usando routerLink.

• Si el primer segmento comienza con /el enrutador buscará la ruta desde la raíz de la aplicación.
• Si el primer segmento comienza con ./o no comienza con una barra inclinada, el enrutador buscará en los elementos secundarios de la ruta activada actual.
• Y si el primer segmento comienza con ../el enrutador subirá un nivel.

para más información mira aquí.. routerLink

Clase de enrutador

Necesitamos inyectar Router class en el componente para usar sus métodos.

Hay más de dos métodos para navegar como navigate() , navigateByUrl()y algunos otros… pero principalmente usaremos estos dos.

1. navigate() :

   Navegar en base a lo proporcionado array de comandos y un punto de partida. Si no se proporciona una ruta de inicio, la navegación es absoluta.

    this.route.navigate(['/team/113/user/ganesh']);
   

   navigate() el comando agregará la última string se agrega a la URL existente. También podemos analizar el queryParams de este método como a continuación,

    this.router.navigate(['/team/'], 
       queryParams:  userId: this.userId, userName: this.userName 
    );
   

   Puede obtener estos valores con ActivatedRoute en el componente navegado. Puedes consultar aquí más sobre paramMap, snapshot(no-observable alternative).

2. navigateByUrl()

   Navegue en función de la URL proporcionada, que debe ser absoluta.

    this.route.navigateByUrl(['/team/113/user/ganesh']);
   

   navigateByUrl() es similar a cambiar la barra de ubicación directamente: estamos proporcionando la entero nueva URL

Estoy usando angular 7 y lo resolví de esta manera en mi proyecto.

1. Primero, debemos implementar estos módulos en nuestro archivo app.module.ts

import  AppRoutingModule from './app-routing.module';
import  BrowserModule  from '@angular/platform-browser';
import  FormsModule  from '@angular/forms';

@NgModule(

  imports: [
    BrowserModule,
    AppRoutingModule, 
    FormsModule,
  ],

)

2. Luego abra su archivo .component.html y luego active un método para navegar a donde desea ir

Home

3.Luego, vaya a su archivo .component.ts hacia donde desea navegar. Y agregue este código allí.

import  Router  from '@angular/router';

export class YourComponentClassName implements OnInit 

    constructor(private router: Router) 

    gotoHome()
        this.router.navigate(['/home']);  // define your component where you want to go
    

4. Y, por último, quiero decir que tenga cuidado de cuidar su app-routing.module.ts donde debe tener la ruta del componente donde desea navegar; de lo contrario, le dará un error. para mi caso

const routes: Routes = [
   path:'', component:LoginComponent,
   path: 'home', component:HomeComponent ,  // you must add your component here
   path: '**', component:PageNotFoundComponent 
];

Gracias, creo, comparto todo el caso para esta sección de enrutamiento. ¡Feliz codificación!

Aquí tienes las reseñas y puntuaciones

Acuérdate de que tienes la opción de añadir una valoración .

---

---

Utiliza Nuestro Buscador