角度自关闭自动生成的组件

Question

我正在使用Angular 7并像这样动态创建组件：

import { Component, ElementRef, OnInit, ViewChild, ComponentFactoryResolver, Input } from '@angular/core';
import { InjectDirective } from '../../directives/inject.directive';
import { ListComponent } from '../list.component';


@Component({
  selector: 'app-terminal',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {

  @ViewChild(InjectDirective) injectComp: InjectDirective;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  addComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ListComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    viewContainerRef.createComponent(componentFactory);
  }

  removeComponent() {
    const viewContainerRef = this.injectComp.viewContainerRef;
    viewContainerRef.remove();
  }

}

我执行addComponent()方法的过程会创建一个新组件，而当我执行removeComponent()方法（从主组件开始）时，这些组件会一个接一个地关闭。

问题是我要关闭主要组件中的组件。

我想在每个生成的组件中都有一个按钮，当我按下它时它会自动关闭。

我该怎么做？