從動態創建的子組件向父組件發出事件

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

UPDATE

我在chrome瀏覽器中調試了它，當在onRemove對象上調用emit函數時，我看到我的onRemove EventEmitter對象在他的observers數組屬性中沒有任何值。

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;