Acerca de la salida del enrutador angular

Acerca de la salida del enrutador angular

Angular es un marco front-end moderno que proporciona muchas herramientas poderosas para ayudarnos a desarrollar aplicaciones web eficientes. Una de las funciones más utilizadas es el sistema de enrutamiento, que nos permite navegar entre diferentes URL y cargar diferentes componentes. En cambio <router-outlet>, es una de las directivas relacionadas con el sistema de enrutamiento en Angular.

¿qué es?

<router-outlet>es una directiva integrada de Angular para mostrar los componentes cargados por el enrutador en nuestras plantillas. Por lo general, se coloca en la plantilla principal (app.component.html) y tiene las siguientes propiedades:

• Al hacer clic en un enlace o usar la navegación programática, inserta dinámicamente el componente correspondiente en función de la URL actual.
• Se puede anidar dentro de otros componentes para crear diseños más complejos.
• Los atributos se pueden utilizar namepara definir varios componentes con nombre <router-outlet>para mostrar varios componentes al mismo tiempo.

Aquí hay un ejemplo básico que muestra cómo usarlo en su aplicación <router-outlet>:

<!-- app.component.html -->
<header>
  <nav>
    <a routerLink="/home">Home</a>
    <a routerLink="/about">About</a>
  </nav>
</header>
<main>
  <router-outlet></router-outlet>
</main>
<footer>
  <!-- footer content here -->
</footer>

Tenga en cuenta que los componentes correspondientes se insertarán dinámicamente cuando <router-outlet>haga clic Homeo enlace.About

¿Cómo definir rutas?

Para utilizar el sistema de enrutamiento, primero debemos definir algunas rutas. En Angular, una ruta consta de una URL y un componente. Por ejemplo, podemos definir una ruta como esta:

const routes: Routes = [
  {
    
     path: 'home', component: HomeComponent },
  {
    
     path: 'about', component: AboutComponent }
];

Aquí definimos dos rutas, una es /homeel componente correspondiente a esta URL HomeComponenty la otra es /aboutel componente correspondiente a esta URL AboutComponent.

También necesitamos importar el módulo de enrutamiento (RouterModule) en el módulo y agregarlo a la matriz de importaciones:

import {
    
     RouterModule, Routes } from '@angular/router';

@NgModule({
    
    
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
    
     }

Entre ellos, forRoot()el método se usa para establecer la ruta raíz y devolver un NgModule que contiene la directiva RouterModule. forChild()Se deben usar métodos si vamos a definir rutas en submódulos .

¿Cómo navegar en código?

Para lograr la navegación de enrutamiento, tenemos dos formas: a través de enlaces y navegación programática.

enlace de navegación

En las plantillas, podemos usar routerLinkdirectivas para agregar funciones de navegación a los enlaces. Por ejemplo:

<!-- app.component.html -->
<a routerLink="/home">Home</a>
<a routerLink="/about">About</a>

navegación programática

Si necesitamos navegar en el código, podemos usar el servicio de enrutador de Angular:

import {
    
     Component } from '@angular/core';
import {
    
     Router } from '@angular/router';

@Component({
    
    
  template: `
    <button (click)="goHome()">Go home</button>
    <button (click)="goAbout()">Go about</button>
  `
})
export class MyComponent {
    
    
  constructor(private router: Router) {
    
    }

  goHome() {
    
    
    this.router.navigate(['/home']);
  }

  goAbout() {
    
    
    this.router.navigate(['/about']);
  }
}

Aquí, definimos dos métodos goHome()e implementamos la navegación de enrutamiento goAbout()llamando a métodos.router.navigate()

Resumir

<router-outlet>es una directiva muy útil que hace que el uso del sistema de enrutamiento en Angular sea mucho más fácil y eficiente. Con una comprensión del enrutamiento y la navegación, podemos crear aplicaciones web más complejas y eficientes.