Hablemos de cómo obtener datos por adelantado en Angular Route

Obtener con anticipación significa obtener los datos antes de que se muestren en la pantalla. En este artículo, aprenderá cómo obtener datos antes de cambios de ruta. A través de este artículo, aprenderá a usar resolver , resolver en Angular App y aplicarlos a una navegación precargada común. [Recomendación de tutorial relacionado: "tutorial angular"]

Por qué debería utilizar Resolver

Resolver desempeña el papel de un servicio de middleware entre el enrutamiento y los componentes. Suponga que tiene un formulario sin datos y desea presentar un formulario vacío al usuario, mostrar un loader mientras se cargan los datos del usuario y luego, cuando se devuelven los datos, completar el formulario y ocultar loader .

Por lo general, obtenemos datos en la función de enlace ngOnInit() del componente. En otras palabras, una vez cargado el componente, iniciamos una solicitud de datos.

Al operar en ngOnInit() , necesitamos agregar la visualización loader a su página de enrutamiento después de cargar cada componente requerido. Resolver puede simplificar la adición y el uso de loader . En lugar de agregar loader a cada ruta, puede simplemente agregar un loader para cada ruta.

Este artículo utilizará ejemplos para analizar los puntos de conocimiento del resolver . Para que puedas recordarlo y utilizarlo en tus proyectos.

Uso de Resolver en aplicaciones

Para utilizar resolver en aplicaciones, es necesario preparar algunas interfaces. Puedes simularlo a través de JSONPlaceholder sin desarrollarlo tú mismo.

JSONPlaceholder es un excelente recurso de interfaz. Puede usarlo para aprender mejor conceptos relacionados del front-end sin estar limitado por la interfaz.

Ahora que el problema de la interfaz está resuelto, podemos iniciar la aplicación resolver . Un resolver es un servicio de middleware, por lo que crearemos un servicio.

$ ng gs resolvers/demo-resolver --skipTests=true

--skipTests=true omite la generación de archivos de prueba

. Se crea un servicio en src/app/resolvers . Hay un método resolve() en la interfaz resolver , que tiene dos parámetros: route (una instancia de ActivatedRouteSnapshot ) y state (una instancia de RouterStateSnapshot ).

loader generalmente escribe todas las solicitudes AJAX en ngOnInit() , pero la lógica se implementará en resolver en lugar de ngOnInit() .

A continuación, cree un servicio para obtener los datos de la lista en JSONPlaceholder . Luego llámelo en resolver y luego configure resolve en la ruta (la página esperará) hasta que se procese resolver . Una vez procesado resolver , podemos obtener los datos mediante el enrutamiento y mostrarlos en el componente.

Cree el servicio y escriba la lógica para obtener los datos de la lista

$ ng gs services/posts --skipTests=true

Ahora que hemos creado exitosamente el servicio, es hora de escribir la lógica para una solicitud AJAX .

El uso de model puede ayudarnos a reducir errores.

$ ng g modelos de clase/publicación --skipTests=true

post.ts

export class Publicación { id: número;
  título: cadena;
  cuerpo: cuerda;
  ID de usuario: cadena;
}

model está listo, es hora de obtener los datos post .

post.service.ts

importa {Inyectable} desde "@angular/core";
importar { HttpClient } desde "@angular/common/http";
importar { Publicación } desde "../modelos/publicación";

@Inyectable({
  proporcionado en: "raíz"
})
exportar clase PostsService {
  constructor(privado _http: HttpClient) {}

  getPostList() {
    let URL = "https://jsonplaceholder.typicode.com/posts";
    devuelve this._http.get<Post[]>(URL);
  }
}

Ahora, este servicio se puede llamar en cualquier momento.

demo-resolver.service.ts

importa {Inyectable} desde "@angular/core";
importar {
  Resolver,
  Instantánea de ruta activada,
  Instantánea del estado del enrutador
} de "@angular/router";
importar {PostsService} desde "../services/posts.service";

@Inyectable({
  proporcionado en: "raíz"
})
la clase de exportación DemoResolverService implementa Resolve<cualquier> {
  constructor (privado _postsService: PostsService) {}

  resolver (ruta: ActivatedRouteSnapshot, estado: RouterStateSnapshot) {
    devolver this._postsService.getPostList();
  }
}

Datos de la lista de publicaciones devueltos por resolver . Ahora, necesita una ruta para configurar resolver , obtener los datos de la ruta y luego mostrar los datos en el componente. Para realizar saltos de enrutamiento, necesitamos crear un componente.

$ ng gc componentes/post-list --skipTests=true

Para que la ruta sea visible, agregue router-outlet en app.component.ts .

<router-outlet></router-outlet>

Ahora puede configurar el archivo app-routing.module.ts . El siguiente fragmento de código le ayudará a comprender el resolver de configuración de ruta.

app-routing-module.ts

importa {NgModule} desde "@angular/core";
importar {Rutas, RouterModule} desde "@angular/router";
importar { PostListComponent } desde "./components/post-list/post-list.component";
importar {DemoResolverService} desde "./resolvers/demo-resolver.service";

rutas constantes: Rutas = [
  {
    ruta: "publicaciones",
    componente: PostListComponent,
    resolver: {
      publicaciones: DemoResolverService
    }
  },
  {
    camino: "",
    redirigir a: "publicaciones",
    pathMatch: "completo"
  }
];

@NgModule({
  importaciones: [RouterModule.forRoot(rutas)],
  exportaciones: [Módulo de enrutador]
})
export class AppRoutingModule {}

Se ha agregado una resolve a la configuración de enrutamiento, que iniciará una solicitud HTTP y luego permitirá que el componente se inicialice cuando HTTP regrese exitosamente. La ruta ensamblará los datos devueltos por HTTP .

Cómo utilizar una navegación precargada

para mostrarle al usuario que hay una solicitud en progreso, escribimos un loader público y simple en AppComponent . Puede personalizarlo según sea necesario.

aplicación.component.html

<div class="loader" *ngIf="isLoader">
  <div>Cargando...</div>
</div>
<router-outlet></router-outlet>

app.component.ts

import {Componente} desde "@angular/core";
importar {
  enrutador,
  evento de enrutador,
  Inicio de navegación,
  NavegaciónFin
} de "@angular/router";

@Componente({
  selector: "raíz de aplicación",
  URL de plantilla: "./app.component.html",
  URL de estilo: ["./app.component.scss"]
})
exportar clase AppComponent {
  isLoader: booleano;

  constructor(privado _router: Enrutador) {}

  ngOnInit() {
    this.routerEvents();
  }

  eventosenrutador() {
    this._router.events.subscribe((evento: RouterEvent) => {
      cambiar (verdadero) {
        caso de evento instancia de NavigationStart: {
          this.isLoader = verdadero;
          romper;
        }
        evento de caso instancia de NavigationEnd: {
          this.isLoader = falso;
          romper;
        }
      }
    });
  }
}

Cuando comienza la navegación, isLoader se le asigna true y verá el siguiente efecto en la página.

Cuando resolver termine de procesarse, quedará oculto.

Ahora es el momento de obtener el valor de la ruta y mostrarlo.

port-list.component.ts

importa {Componente, OnInit} desde "@angular/core";
importar {Enrutador, ActivatedRoute} desde "@angular/router";
importar { Publicar } desde "src/app/models/post";

@Componente({
  selector: "lista de publicaciones de aplicaciones",
  URL de plantilla: "./post-list.component.html",
  URL de estilo: ["./post-list.component.scss"]
})
la clase de exportación PostListComponent implementa OnInit {
  publicaciones: Publicación [];

  constructor (ruta _privada: ruta activada) {
    this.publicaciones = [];
  }

  ngOnInit() {
    this.posts = this._route.snapshot.data["publicaciones"];
  }
}

Como se muestra arriba, el valor de post proviene de los data de información instantánea de ActivatedRoute . Ambos valores se pueden obtener siempre que configures la misma información en la ruta.

Representamos de la siguiente manera en HTML .

<div class="contenedor de cuadrícula de lista de publicaciones">
  <div class="card" *ngFor="dejar publicar publicaciones">
    <div class="title"><b>{{post?.title}}</b></div>
    <div class="body">{{post.body}}</div>
  </div>
</div>

Los estilos de fragmentos CSS hacen que se vea más hermoso.

lista de puertos.component.css

.grid-container {
  pantalla: cuadrícula;
  columnas-plantilla-cuadrícula: calc(100%/3) calc(100%/3) calc(100%/3);
}
.tarjeta {
  margen: 10px;
  sombra de cuadro: negro 0 0 2px 0px;
  relleno: 10px;
}

Se recomienda utilizar el preprocesador scss para escribir estilos.

Después de obtener los datos de la ruta, se mostrarán en HTML . El efecto es el siguiente: instantánea.

En este punto, ha aprendido a utilizar resolver en su proyecto.

Resumen

Combinado con el diseño de la experiencia del usuario y con la ayuda del resolver , puede mejorar el rendimiento de su aplicación. Para obtener más información, puede visitar el sitio web oficial.

Este artículo es una traducción, utilizando traducción gratuita, con comprensión personal y comentarios agregados. La dirección original es:

https://www.pluralsight.com/guides/prefetching-data-for-an-angular-route

.