Angular-有条件地处理父组件中的多个子组件

I have a set of different child views which I require to be loaded on a condition. Everything works fine however, I receive a message that ViewDestroyedError: Attempt to use a destroyed view: detectChanges. So I believe that this is causing that on parent load, all the views are rendered once. However, whenever the condition satisfy for the view, it might be possible that it was already rendered before hence saying that attempting to use a destroyed view.

样例代码

<div class="parent>
    <app-dropdown *ngSwitchCase="'dropdown'" [reply]="answer" (response)="myResponse($event)"></app-dropdown>
    <app-select *ngSwitchCase="'select'" [reply]="answer" (response)="myResponse($event)"></app-select>
    <app-input *ngSwitchCase="'input'" [reply]="answer" (response)="myResponse($event)"></app-input>
</div>

在上面的代码中，我通常会从API依次得到有关类型“选择”，“下拉”和“输入”的答复。或者它可能会动态更改顺序。但是在这里，我遇到了ViewDestroyedError的错误：尝试使用被破坏的视图：detectChanges。

我尝试添加ChangeDetectorRef，但是它对我来说是新的，因此无法找到方法。 我的孩子之一的代码如下。

export class DropdownComponent implements OnInit {
  @Input() reply: any;
  @Output() response = new EventEmitter();
  constructor(private cdRef: ChangeDetectorRef) {
  }

  ngOnInit() {
    if (this.reply.answerType === 'speciality') {
      this.response.emit('Hello');
    }
  }

  ngOnDestroy(): void {

  }
}

I'm just checking the reply and if it's as per condition, then emitting the response. But getting blank response as the view is already rendered with other component. I tried changing ngOnChange() also instead of ngOnInit but still same issue.