Header Ads Widget

Ticker

6/recent/ticker-posts

Enrutador angular 10/9: animaciones de ruta por ejemplo

 El enrutador Angular 10 admite la adición de animaciones al navegar entre diferentes rutas en su aplicación. En este tutorial, aprenderemos cómo usar la API de animaciones de Angular para reproducir animaciones cuando cambia una ruta en su aplicación.

Creando un Proyecto Angular 10

En este tutorial asumimos que ya tiene Angular CLI 10 instalado. Luego puede generar un proyecto usando el siguiente comando desde su terminal:

$ ng new angular-project

También necesitamos algunos componentes. Créelos usando:

$ ng g c list
$ ng g c detail

Agregar rutas angulares 10

A continuación, debe agregar rutas a los componentes Angular 10 creados en su módulo de enrutamiento app-routing.module.ts:


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

import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';
import { DetailComponent } from './detail/detail.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'list', component: ListComponent },
  { path: 'detail', component: DetailComponent },

];

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

En el app.component.htmlpodemos agregar el siguiente código para navegar entre los diferentes componentes:

<nav>
    <a routerLink="">home</a>
    <a routerLink="list">list</a>
    <a routerLink="detail">detail</a>    
</nav>
<div>
  <router-outlet></router-outlet>
</div>

La routerLinkdirectiva se utiliza para crear enlaces a rutas definidas en el módulo de enrutamiento.

El <router-outlet>es donde el router angular inserta el componente (s) acorde con la ruta actual.

Añadiendo el módulo de animaciones angulares: BrowserAnimationsModule

Antes de que podamos crear animaciones de enrutamiento, necesitamos importar el módulo de animaciones en el módulo principal de la aplicación:



import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';
import { DetailComponent } from './detail/detail.component';


@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule, AppRoutingModule],
  declarations: [AppComponent, HomeComponent, ListComponent,DetailComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Definición y registro de animaciones de enrutador angular

En app.component.tslo que necesita para definir su animación y registrarse en la animationsmatriz del componente:

import { Component } from '@angular/core';
import {
  transition,
  trigger,
  query,
  style,
  animate,
  group,
  animateChild
} from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
trigger('myAnimation', [
  transition('* => *', [
    query(
      ':enter',
      [style({ opacity: 0 })],
      { optional: true }
    ),
    query(
      ':leave',
       [style({ opacity: 1 }), animate('0.3s', style({ opacity: 0 }))],
      { optional: true }
    ),
    query(
      ':enter',
      [style({ opacity: 0 }), animate('0.3s', style({ opacity: 1 }))],
      { optional: true }
    )
  ])
]);

  ] // register the animations

})
export class AppComponent { }

Primero importamos varios métodos del @angular/animationsmódulo. A continuación, en la matriz de animaciones del componente definimos nuestra animación.

Usamos el trigger()método para crear un myAnimationdisparador que se aplicará al que <div>contiene la salida del enrutador en la plantilla del componente.

A continuación, en el segundo parámetro (matriz) del trigger()método, proporcionamos un transition()método que toma dos parámetros: el primer parámetro especifica cuándo se deben aplicar las animaciones. En este caso, cuando hay una transición de cualquier ruta a cualquier ruta ( ’* <=> *’). El segundo parámetro toma una serie de animaciones.

También podemos especificar cualquier número de transiciones ya que el segundo parámetro del trigger()método es de tipo Array.

A continuación, creamos una serie group([])de query()métodos para consultar cualquier componente que esté entrando o saliendo del DOM y aplicamos estilos y animaciones a los estados :enter:leaveque crean efectos de aparición y desaparición gradual.

Aplicar la animación en la salida del enrutador

Después de definir la myAnimationanimación, debemos aplicarla a la salida de nuestro enrutador.

<div [@myAnimation]="o.isActivated ? o.activatedRoute : ''">
  <router-outlet #o="outlet"></router-outlet>
</div>

Usamos una referencia de plantilla para crear una referencia a la salida del enrutador #o="outlet"Esto es útil para saber cuándo la salida del enrutador está activa para que podamos activar la animación.

Conclusión

En este rápido tutorial de animaciones de enrutador Angular 10, hemos visto cómo definir y activar animaciones al navegar entre rutas en aplicaciones de Angular 10.

Publicar un comentario

0 Comentarios