时间戳

首页 > 解决方案 > 如何将 EventEmitter 与动态组件结合起来？

angular - 如何将 EventEmitter 与动态组件结合起来？

问题描述

我正在尝试结合动态组件（在运行时创建）和 EventEmitter 概念来访问 Angular 8 中父组件中子组件的数据。

我的计划是创建一个功能，用户可以在其中动态添加元素（例如仪表板上的卡片）并删除它们。在这种情况下，创建的卡片有一个“删除”按钮。这个删除按钮应该将信息传播到父组件，子组件可以从包含动态创建的组件的数组中删除。

我从角度文档中阅读了本教程，我需要创建一个指令。现在我有一个说法（我认为），该指令位于父组件和子组件之间，我不知道如何正确发出事件以从提到的数组中删除子组件。

指令

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

  constructor(public viewContainerRef: ViewContainerRef) {
  }

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

父组件

卡片横幅.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 {
  }

}

卡片横幅.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>

子组件

卡片内容.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);
  }
}

卡片内容.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。

先感谢您！

标签： angularangular-directiveangular8angular-event-emitter

解决方案

动态创建组件事件后订阅组件事件：

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

推荐阅读