时间戳

首页 > 解决方案 > 如何使用角度解析处理我的getProduct请求中的html

angular - 如何使用角度解析处理我的getProduct请求中的html

问题描述

产品成分——

export class ProductComponent implements OnInit {
  
  constructor(
    private route: ActivatedRoute,
    private router: Router,
  ) { }

  ngOnInit() {
    this.route.data
      .subscribe(
        (data: Data) => {
          this.router = data['product'];
        }
      );
  }
}

我不确定我需要在 html 中添加什么 - 很想得到一些帮助 -

<div class="productContainer">
    <img class="productContainer__image" src="img">

    <div class="innerContainer">
        <p class="innerContainer__text">text</p>
        <label class="innerContainer__text">Size:</label>
        <app-select [options]="['XS', 'S', 'M', 'L', 'XL']" placeholder="Size" width="100px"></app-select>
        <label class="innerContainer__price">Price: 40$</label>
        <div class="buttonContainer">
            <button class="buttonContainer__button">Add to bag</button>
        </div>
    </div>
</div>

http-产品-服务-

   public getProduct(id: string): Observable<IGetProductResponse> {
        const baseUrl = ENDPOINT;

        return this.http.get<IGetProductResponse>(baseUrl + id);
    }

产品-服务-

  public getProduct(id: string): Observable<IProductInterface> {
    return this.httpProductService.getProduct(id)
      .pipe(catchError((errorResponse: HttpErrorResponse) => {
        let errorMessage: string;

        switch (errorResponse.status) {
          case 400:
            errorMessage = 'e';
            break;
          default:
            errorMessage = 'e';
        }

        return throwError(errorMessage);
      }),
        map((response: IGetProductResponse) => response.data!),
      );
  }

产品解析器 -

@Injectable()
export class ProductResolver implements Resolve<IProductInterface> {

    constructor(private productService: ProductService) { }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IProductInterface> {
        return this.productService.getProduct(route.paramMap.get('id')!);
    }
}

如果您需要查看更多答案代码或任何内容，我将编辑该帖子。谢谢任何帮助。

标签： angulartypescriptmongodbmongoose

解决方案

在您的组件中定义产品然后 =>

    this.activatedRoute.data.subscribe(data => {
          this.product= data.product;
})

然后只需使用您在 html 中定义的“产品”

<div>{{product.name}}</div>

不要忘记在您的路由中添加产品解析器

{
        path: "product/:id", component: ProductComponent,
        resolve: {
          product: ProductResolver,
        }
      },

推荐阅读