Saltar al contenido
Consejos

Prefectura de datos para una ruta angular

Para mostrar al usuario que una solicitud está en progreso, escribe un cargador simple común en AppComponent. Puede personalizarlo según sus necesidades.

app.component.html

Prefectura de datos para una ruta angular
Prefectura de datos para una ruta angular
1234<div*ngIf="isLoader"

html

app.component.ts

12345678910111213141516171819202122232425262728293031323334353637importar{Componente}de"@angular/núcleo";import{Router,RouterEvent,NavigationStart,NavigationEnd}de"@angular/router";@Componente({ selector: "app-root", templateUrl:"./app.component.html", styleUrls:["./app.component. scss"]})exportclassAppComponent{ isLoader:boolean;constructor(private _router:Router){}ngOnInit(){this.routerEvents();}routerEvents(){this._router.events. subscribe((event:RouterEvent)=.
ts


Cuando se inicie la navegación, el valor de isLoader será verdadero, y verás la siguiente salida.



Después de que la resolución se resuelva, se ocultará.



Ahora es el momento de buscar el valor de la ruta y mostrarlo en la lista.



 port-list.component.ts 



1234567891011121314151617181920importar{Componente,OnInit}de"@angular/núcleo";importar{Ruta,RutaActivada}de"@angular/ruta";importar{Post}de "src/app/modelos/post";@Componente({ selector: "app-post-list", templateUrl:"./post-list. component.html", styleUrls:["./post-list.component.scss"]})exportclassPostListComponentientimentsOnInit{ posts:Post[];constructor(privado _route:ActivatedRoute){this.posts=[];}ngOnInit(){this.posts=this._route.snapshot.data["posts"];}}
ts

Aquí, el valor proviene de los datos de la instantánea de la Ruta Activada. El valor está disponible a través de la misma ruta que se ha configurado en el enrutamiento.

Así es como se ve el valor en HTML.
123456<div;²;div*ngFor="let post of posts"};b;²;{{post?.title}}</b;²;/div;²;div;²;{{{post.body}}</div;²;²;ÿÿÿÿÿÿÿÿÿÿÿÿÿÿsobre qué?
html


Este fragmento de CSS lo hará más bonito.



 port-list.component.css 



123456789.grid-contenedor{display: grid;grid-plantilla-columnas:calc(100%/3)calc(100%/3)calc(100%/3);}.card{margin:10px;box-shadow: black 002px0px;padding:10px;}
css

Después de que los datos se obtengan de la ruta, se mostrarán en HTML. La lista se verá como el siguiente recorte.

En este punto has hecho todo lo que tienes que hacer para implementar la resolución en tu proyecto.