在 Angular 6 中使用具有输入属性的可重用组件

Posted 2023-02-23

【中文标题】在 Angular 6 中使用具有输入属性的可重用组件

【英文标题】：Using re-usable component in Angular 6 with input properties

【发布时间】：2018-11-07 09:48:17

【问题描述】：

我有三个组件：产品详细信息、产品卡片和产品数量。

我在产品卡中使用产品数量，但我想在产品详细信息中也使用它（产品数量）（我不想在产品详细信息中使用产品卡，因为我想改变产品卡片样式）

我的 product-card 和 product-quantity 包含一些输入属性，例如产品、购物车等。

product-card.component.html

    <div *ngIf="showActions && shoppingCart" class="card-footer">
    <button *ngIf="shoppingCart.getQuantity(product) === 0; else updateQuantity" (click)="addToCart()" class="btn btn-secondary btn-block">
    <i class="fa fa-cart-plus"></i>Add to Cart</button>
    <ng-template #updateQuantity>
    <product-quantity [product]="product" [shopping-cart]="shoppingCart">

    </product-quantity>
    </ng-template>
</div>

product-card.component.ts

export class ProductCardComponent implements OnInit 

  @Input('category') category: Category;
  @Input('product') product: Product;
  @Input('show-actions') showActions = true;
  @Input('shopping-cart') shoppingCart: ShoppingCart;

  category$;
  products$;

  constructor(
    private cartService: ShoppingCartService,
    private categoryService: CategoryService,
    private productService: ProductService
  ) 

  addToCart() 
    this.cartService.addToCart(this.product);
  

  async ngOnInit() 
    this.category$ = await this.categoryService.getCategory(this.product.category);
    this.products$ = await this.productService.getAll();
  

product-details.component.html

<div class="card">
          <div *ngIf="product.imageUrl" [style.backgroundImage]="'url(' + product.imageUrl + ')'" class="card-img-top">
          </div>
          <div *ngIf="showActions && shoppingCart" class="card-footer">
            <button *ngIf="shoppingCart.getQuantity(product) === 0; else updateQuantity" (click)="addToCart()" class="btn btn-secondary btn-block">
              <i class="fa fa-cart-plus"></i>Add to Cart</button>
            <ng-template #updateQuantity>
              <product-quantity [product]="product" [shopping-cart]="shoppingCart">
              </product-quantity>
            </ng-template>
          </div>
        </div>

product-details.component.ts

export class ProductDetailsComponent implements OnInit 

  id;
  product$;
  cart$: Observable<ShoppingCart>;

  constructor(
    private route: ActivatedRoute,
    private productService: ProductService,
    private cartService: ShoppingCartService,
    private categoryService: CategoryService
  ) 
    this.id = this.route.snapshot.params['id'];
  

  async ngOnInit() 
    this.cart$ = await this.cartService.getCart();
    this.product$ = await this.productService.get(this.id);
  

product-quantity.component.ts

export class ProductQuantityComponent 

  @Input('product') product: Product;
  @Input('show-actions') showActions = true;
  @Input('shopping-cart') shoppingCart: ShoppingCart;

  constructor(private cartService: ShoppingCartService)  

  addToCart() 
    this.cartService.addToCart(this.product);
  

  removeFromCart() 
    this.cartService.removeFromCart(this.product);
  

   

当我为我的项目提供服务时，我不设置数量组件，但可以查看其他元素。我哪里有错误？谁能解释一下我做错了什么？

提前致谢！

【问题讨论】：

请将您的代码缩减为minimal reproducible example

首先，你为什么用await代替promise或者observer？其次，你确定*ngIf="showActions && shoppingCart" 是真的吗？请在 console.log 中给我们这些变量的值

await 只是一个临时解决方案，我一解决这个问题就去重构代码，别着急。我的product-details.component 没有看到属性showActions 和shoppingCart。已编辑的product-details.component.html：添加了product-quantity 并删除了product-card

【参考方案1】：

如果你想要一个按钮或者你想要的组件取决于条件，请使用 div 模板条件。

<div *ngIf="condition; then thenBlock else elseBlock"></div>  

  <ng-template #thenBlock>
    <div >
        Quantity Component 
    </div>
  </ng-template>
  <ng-template #elseBlock>     
        <button type="button"  (click)="changeBoolValue()">ADD Button</button>
  </ng-template> 

demo

【讨论】：

@Lebek 我修改了帖子，并在 stackblitz

中放了一个示例

我不能那样做。让我给你解释一下。我有按钮Add to Cart，当我点击它时，它会变成quanity.component。因此，如果我实施您的解决方案，我会突然得到两个元素：Add to cart 和 quantity.component

我已经修改了我的帖子。看看这个例子demo

【参考方案2】：

我使用*ngIf 指令创建了div，并创建了一个Input 属性以发送title、price 是否允许向用户显示。默认情况下它设置为 true 但是当我注入一个组件时将它设置为 false 并且细节不可见