Использование повторно используемого компонента в Angular 6 со свойствами ввода - PullRequest
Новая
       45

Использование повторно используемого компонента в Angular 6 со свойствами ввода

0 голосов
/ 28 мая 2018

У меня есть три компонента: информация о товаре, карточка товара и количество товара.

Я использую количество товара в карточке товара, но хочу использовать его (количество товара) также вДетали продукта (я не хочу использовать там карту продукта в деталях продукта, потому что я хочу изменить стиль карты продукта)

Моя карта продукта и количество продукта содержат несколько входных свойствнапример, продукт, корзина и т. д.

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-amount.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);
  }

}

Когда я обслуживаю свой проект, я не вижу количественную составляющую, но другие элементы доступны для просмотра.Где у меня ошибка?Может кто-нибудь объяснить мне, что я сделал не так?

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Я создал div с директивой *ngIf и создал свойство Input для отправки, если title, price разрешено показывать пользователю.По умолчанию установлено значение true, но когда я внедряю компонент, устанавливается значение false, и детали не отображаются

0 голосов
/ 28 мая 2018

Используйте условие шаблона 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

...