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 鈥渉ome鈥 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 鈥渙pcionales鈥 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
        }
      });
  }