将事件从动态创建的子组件发送到父组件

Question

我有一个滑块，其中是动态创建的项目-这些是子组件。

父模板，其中滑块是ng-container：

<div id="slider-wrapper">
    <ng-container appSliderForm *ngFor="let question of questionsInSlider"
                          [questionTest]="question" (onRemove)="removeQuestion($event)">
    </ng-container>
</div>

这些子组件由appSliderForm指令创建：

@Directive({
  selector: '[appSliderForm]'
})
export class FormSliderDirective implements OnInit {

  @Input()
  questionTest: QuestionInSlider;

  constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef) {}

  ngOnInit(): void {
    const factory = this.resolver.resolveComponentFactory<TestQuestionInSliderComponent>(TestQuestionInSliderComponent);
    const component = this.container.createComponent(factory);
    component.instance.questionTest = this.questionTest;
    component.instance.ref = component;
  }

}

在我的子组件中，我有一个删除功能，用于将自己从滑块中删除。

@Component({
  selector: 'app-test-question-in-slider',
  templateUrl: './test-question-in-slider.component.html',
  styleUrls: ['./test-question-in-slider.component.less']
})
export class TestQuestionInSliderComponent {

  questionTest: QuestionInSlider;

  ref: any;

  @Output() public onRemove = new EventEmitter<QuestionInSlider>();

  constructor(private builderService: FormBuilderService) {}

  /**
   * Chosen question from slider will be displayed.
   */
  choose(): void {
    this.questionTest.chosen = true;
    this.builderService.handlerQuestionFromSlider(this.questionTest);
  }

  remove(): void {
    this.onRemove.emit(this.questionTest);
    this.ref.destroy();
  }

  isChosen() {
    return {'chosen': this.questionTest.chosen};
  }

  getBorderTopStyle() {
     return {'border-top': `4px solid ${this.questionTest.color}`};
  }

}

当通过单击子组件模板中的“删除”图标来调用此删除功能时，我想发出事件以使父组件知道要执行的其他操作，但是函数 removeQuestion 父组件中的>不会被调用。

请问我为什么不叫这个removeQuestion函数？

removeQuestion(question: QuestionInSlider) {
    console.log(question);
  }

更新

我已经在chrome浏览器中对其进行了调试，并且发现当 emit 函数处于运行状态时，我的 onRemove EventEmitter对象的观察者数组属性中没有任何值调用了onRemove对象。

this.onRemove.emit(this.questionTest);

Answer 1

问题是FormSliderDirective没有onRemove事件。为了使代码正常工作，您需要将事件添加到指令中并将其订阅到内部组件的事件中。因此，每当内部事件触发时，它都会传播到外部。

以下是将其添加到指令中的示例：

@Directive({
  selector: '[appSliderForm]'
})
export class FormSliderDirective implements OnInit {

  @Input() questionTest: QuestionInSlider;
  @Output() public onRemove = new EventEmitter<QuestionInSlider>();

  constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef) {}

  ngOnInit(): void {
    const factory = this.resolver.resolveComponentFactory<TestQuestionInSliderComponent>(TestQuestionInSliderComponent);
    const component = this.container.createComponent(factory);
    component.instance.questionTest = this.questionTest;
    component.instance.onRemove.subscribe(this.onRemove); // this connects the component event to the directive event
    component.instance.ref = component;
  }

}

Answer 2

应用@AlesD解决方案后，当发生相同错误时，它可能会为您提供帮助：

ERROR TypeError: Cannot read property 'subscribe' of undefined

该变通办法对我有用：

component.instance.onRemove = this.onRemove;