Angular DOM Manipulation: почему ViewChildren работает, а ViewChild - нет

Question

Я нашел интересную статью здесь от ngWizard, которая ссылается на пример stackblitz о правильном способе удаления компонента.

@Component({
  selector: 'app-root',
  template: `
    <button (click)="remove()">Remove child component</button>
    <a-comp #c></a-comp>
  `
})
export class AppComponent implements AfterViewChecked {
  @ViewChildren('c', {read: ElementRef}) childComps: QueryList<ElementRef>;


  constructor(private hostElement: ElementRef, private renderer: Renderer2) {
  }

  ngAfterViewChecked() {
    console.log('number of child components: ' + this.childComps.length);
  }

  remove() {
    this.renderer.removeChild(
      this.hostElement.nativeElement,
      this.childComps.first.nativeElement
    );
  }
}

В этом примере он использует @ViewChildren (такчто он может записать число дочерних элементов в консоль).

Я упростил это, чтобы вместо этого использовать @ViewChild, как показано ниже ( stackblitz ):

export class AppComponent {
  @ViewChild('c') child:ElementRef;


  constructor(private hostElement: ElementRef, private renderer: Renderer2) {
  }

  remove() {
    this.renderer.removeChild(
      this.hostElement.nativeElement,
      this.child.nativeElement
    );
  }
}

К сожалению, вот результат, который я получил:

ОШИБКА TypeError: Не удалось выполнить «removeChild» на «Узле»: параметр 1 не имеет типа «Узел».

Почемуэто то, что ссылка на первый элемент elementRef в ViewChildren работает, а ссылка на один элемент elementRef в ViewChild - нет?

Answer 1

Я считаю, что это должно работать:

   @ViewChild('c', {read: ElementRef}) child:ElementRef;

Надеюсь, это поможет.