Как совместить EventEmitter с динамическими компонентами? - PullRequest
Новая
       36

Как совместить EventEmitter с динамическими компонентами?

0 голосов
/ 26 июня 2019

Я пытаюсь объединить динамические компоненты (которые создаются во время выполнения) и концепцию EventEmitter для доступа к данным дочернего компонента в родительском компоненте в Angular 8.

Мой план состоит в том, чтобы создать функцию, в которой пользователь может динамически добавлять элементы (например, карточки на приборную панель) и также удалять их. В этом случае созданная карта имеет кнопку «Удалить». Эта кнопка удаления предназначена для передачи информации родительскому компоненту, чтобы дочерний компонент мог быть удален из массива, который содержит динамически созданные компоненты.

Я прочитал в этом уроке из угловой документации, что мне нужно создать директиву. Теперь у меня есть sutation (я думаю), что директива находится между родительским и дочерним компонентами, и я не знаю, как правильно генерировать событие, чтобы удалить дочерний компонент из упомянутого массива.

Директива 

@Directive({
  selector: '[appCards]'
})
export class CardDirective {

  constructor(public viewContainerRef: ViewContainerRef) {
  }

  @Output() directiveDelete = new EventEmitter<any>();
}

Родительский компонент

карта-banner.component.ts 

@Component({
  selector: 'app-card-banner',
  templateUrl: './card-banner.component.html',
  styleUrls: ['./card-banner.component.scss']
})
export class CardBannerComponent implements OnInit, OnDestroy  {

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  @Input() cards: CardItem[];

  @ViewChild(CardDirective) appCards: CardDirective;

  loadCards() {
    const viewContainerRef = this.appCards.viewContainerRef;
    viewContainerRef.clear();
    for (const card of this.cards) {
      const componentFactory =
        this.componentFactoryResolver.resolveComponentFactory(card.component);
      const componentRef = viewContainerRef.createComponent(componentFactory);
      (componentRef.instance as CardContentComponent).data = card.data;
    }
  }

  addCard() {
    this.cards.push(new CardItem(CardContentComponent, {name: 'Card Dynamisch'}));
    this.loadCards();
  }

  removeLastCard() {
    this.cards.pop();
    this.loadCards();
  }

  onDelete(deleteBool: any) {
    console.log(deleteBool);
    console.log('delete in card-banner');
  }

  ngOnInit() {this.loadCards();
  }

  ngOnDestroy(): void {
  }

}

карта-banner.component.html 

<button (click)="addCard()" class="btn">Add Card</button>
<button (click)="removeLastCard()" class="btn">Remove Card</button>

<div style="margin: auto;">
  <ng-template appCards (directiveDelete)="onDelete($event)"></ng-template>
</div>

дочерний компонент

карта-content.component.ts 

@Component({
  selector: 'app-card',
  templateUrl: './card-content.component.html',
  styleUrls: ['./card-content.component.scss']
})
export class CardContentComponent implements CardInterfaceComponent {

  @Input() data: any;
  @Output() delete = new EventEmitter<any>();

  removeCard() {
    this.delete.emit(true);
    console.log('delete card: '  + this.data.name);
  }
}

карта-content.component.html 

<div >
  <div style="display: inline;">{{data.name}} <button (click)="removeCard()" class="btn">Delete</button></div>
</div>

У меня также есть Card-Service, Card-Interface и Card-Item класс, но я не думаю, что они имеют влияние в этом случае, поэтому я не опубликовал их. Если они необходимы, я могу добавить их.

Итак, моя проблема в том, что родительский компонент не получает сообщение об удалении от дочернего компонента и, следовательно, карта не может быть удалена.

Я надеюсь, что кто-то может помочь мне понять, где теряется информация и как я должен использовать EventEmitter в этом случае.

Спасибо заранее!

1 Ответ

1 голос
/ 26 июня 2019

Подписаться на событие компонента после его динамического создания: 

  loadCards() {
    const viewContainerRef = this.appCards.viewContainerRef;
    viewContainerRef.clear();
    for (const card of this.cards) {
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(card.component);
      const componentRef = viewContainerRef.createComponent<CardContentComponent>(componentFactory);
      componentRef.instance.data = card.data;
      componentRef.instance.delete.subscribe(() => {
        // handle delete logic
      });
    }
  }
...