Использование @Output () с динамически добавленными компонентами

Question

Я создаю список покупок.Он будет состоять из двух компонентов: shopping-cart и shopped-item.

. В корзине есть кнопка, которая динамически добавляет новый покупаемый товар в <div>.

.Элемент покупки после добавления можно пометить как активный или немаркированный, поэтому я создал EventEmmiter, который изменяет значение, помеченное / немаркированное.Но так как компонент добавляется динамически, я не знаю, где добавить его в компонент корзины покупок ...

Как мне заставить его работать так:

После покупаемого элементадобавлен, он появляется в массиве с отмеченным / немаркированным значением, которое изменяется при щелчке по нему в компоненте покупаемого товара?

Приветствия!

Файл Shopped-item.ts :

export class ShoppedItemComponent implements OnInit {

  _ref:any;   
  removeObject(){
    this._ref.destroy();
  } 

  @Output() statusChange = new EventEmitter<{status: boolean}>();

  marked;

  unmarkItem () {
    this.marked = !this.marked;
    this.statusChange.emit({status: this.marked});
  }


  constructor() {    
   }

}

Shopping-cart.ts файл:

export class ShoppingCartComponent implements OnInit {

  @ViewChild('boughtItems', { read: ViewContainerRef }) boughtItems: 
    ViewContainerRef;

  constructor(
    private resolver: ComponentFactoryResolver
  ) { }

  isMarked = [];

  shoppedItemStatus (statusChange: {status: boolean}) {
    this.isMarked.push({
      status: statusChange.status
    })
  }

  addItem() {
    const shoppedItem = 
      this.resolver.resolveComponentFactory(ShoppedItemComponent);
    const component = this.boughtItems.createComponent(shoppedItem);
    component.instance._ref = component;        
  }

}

Shopping-cart.html файл:

  <div #boughtItems>
    <button (click)="addItem()">ADD</button>
  </div>

Answer 1

Почему вы создаете компоненты вручную?

Я бы использовал * ngFor в представлении

<div #boughtItems>
  <button (click)="addItem()">ADD</button>
  <div *ngFor="let item of items">
    <app-item-bought xxxx="item" (markToggle)="myFunction(item)"></app-item-bought>
  </div>
</div>

где xxxx - это поле вашего класса ShoppedItemComponent, украшенное Input ('xxxx'). (markToggle) - это имя эмиттера в ShoppedItemComponent, а myFunction (item) - это функция, определенная в корзине покупок, которая получит элемент, вызвавший событие.

Надеюсь, это поможет!