Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Creando el Home

3/25
Recursos

Crear rutas y relacionarlas con componentes en Angular es una tarea trivial. Anímate a construir tu primera aplicación con rutas, crea una página de inicio y otra página para listar productos o hablar de ti.

Cómo optimizar rutas en Angular

Veamos algunos consejos para optimizar tus rutas.
Ocurrirá en tu aplicación que el usuario no ingrese ninguna ruta. Siempre es buena práctica tener otra por defecto y puedes realizarlo de la siguiente manera:

// app-routing.module.ts
const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'catalogo',
    component: CatalogoComponent
  },
  {
    path: 'home',
    component: HomeComponent
  }
];

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

Observa la primera regla que tiene el path vacío y un redirectTo para redireccionar al componente “home” cuando no se ingresa ninguna ruta. Utiliza también la opción pathMatch para asegurar que la ruta sea exacta.

Código fuente del proyecto.


Contribución creada por: Kevin Fiorentino.

Aportes 6

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Esta es mi solución al reto, en el componente products.component.ts he agregado una variable que me va a servir como Output con una función que será el que va a emitir el evento

@Output() onLoadMore: EventEmitter<string> = new EventEmitter<string>();

loadMore() {
    this.onLoadMore.emit();
}

Ya desde products.component.html cuando se le de click al button vamos a llamar a la función loadMore()

<button (click)="loadMore()">Load more</button>

Para finalizar desde home.component.html solo tenemos que leer dicho evento y mandar a llamar la lógica para cargar más del home.component.ts

<app-products [products]="products" (onLoadMore)="loadMore()"></app-products>
loadMore(): void {
    this.productsService.getAll(this.limit, this.offset)
      .subscribe(data => {
        this.products = this.products.concat(data.filter(product => product.images.length > 0));
        this.offset += this.limit;
      });
  }

Para finalizar en el servicio de products, no se hace una correcta asignación de los params, entonces si quieren que les funcione correctamente solo deben de cambiar en la función getAll lo siguiente:

let params = new HttpParams();
if (limit != undefined && offset != undefined) {
   params = params.set('limit', limit);
   params = params.set('offset', offset);
}

hi, hice el siguiente cambio al getAll del servicio de products, porqué no estaba identificando que los valores limit y offset

getAll(limit?: number, offset?: number) {
    let params = new HttpParams();
   //Inicio de los cambios
    const temp_limit = limit as number;
    const temp_offset = offset as number;

    if(temp_limit?.toString().length > 0 && temp_offset?.toString().length > 0) {
      params = params.set('limit', temp_limit);
      params = params.set('offset', temp_offset);
    }
   //Fin de los cambios
    
    return this.http.get<Product[]>(this.apiUrl, { params, context: checkTime() })
    .pipe(
      retry(3),
      map(products => products.map(item => {
        return {
          ...item,
          taxes: .19 * item.price
        }
      }))
    );
  }

creo que lo que estaba sucediendo en la implementación anterior, es que al ser los valore “opcionales” el if lo toma siempre como undefined así los enviemos y nunca se hará el set de los params 😁

¿Que pasa si un usuario digita un path que no existe?
podríamos hace lo siguiente, esto redirige al home cualquier path que no exista en nuestra lista de rutas

  {
    path: '**',
    redirectTo: '/home',
    pathMatch: 'full',
  }

Detalle que parece importante resaltar en esta clase.

PathMatch se utiliza para especificar cómo se debe hacer la coincidencia de la ruta. Hay dos opciones:

full: la ruta se considera coincidente si el resto de la URL coincide con la ruta especificada.

prefix: la ruta se considera coincidente si la URL comienza con la ruta especificada.

Hola,
la API funciona, da respuesta, pero las direcciones de las imágenes que manda la API para cada producto, no funcionan. Parece que el portal https://placeimg.com/ ha dejado de funcionar.
Saludos.

Esta fue mi solución:

//Products.ts
  @Output() loadMore = new EventEmitter<ILoadMore>();
  limit: number = 10;
  offset: number = 0;
  @Input() btnMoreActive: boolean = true

  onLoadMore() {
    this.offset += this.limit
    this.loadMore.emit({ limit: this.limit, offset: this.offset })
  }
//Product.html
  <button *ngIf="btnMoreActive" (click)="onLoadMore()">Load More</button>

//Home.html
<app-products [btnMoreActive]="btnMoreActive" [products]="products"  (loadMore)="onLoadMore($event)" />
//home.ts
 btnMoreActive: boolean = true
  onLoadMore({ limit, offset }: ILoadMore) {
    this.productsService.getProductByPage(limit, offset)
      .subscribe(data => {
        this.products = this.products.concat(data)
        if (this.products.length === this.countProducts) {
          this.btnMoreActive = false
        }
      });
  }