Question

我有三个组成部分：产品详情，产品卡和产品数量。

我在产品卡中使用产品数量，但我也想在产品详情中使用它（产品数量）（我不想在产品详细信息中使用产品卡，因为我＆＃ 39;想改变产品卡的风格）

我的产品卡和产品数量包含一些输入属性，如产品，购物车等。

产品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>

产品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();
  }
}

产品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>

产品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);
  }

}

产品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);
  }

}

当我投放我的项目时，我没有数量组件，但可以看到其他元素。我有错误的地方？谁能解释一下我做错了什么？

提前致谢！

Answer 1

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

<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

Answer 2

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

使用Angular 6中的可重用组件和输入属性

2 个答案: