Question

我发现了ngWizard的有趣的文章here，其中引用了关于删除组件的正确方法的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的类型不是“节点”。

为什么在ViewChildren中引用第一个elementRef却不能在ViewChild中引用单个elementRef呢？

Answer 1

我认为这应该有效：

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

希望有帮助。

Angular DOM操作：为什么ViewChildren有效而ViewChild不起作用

1 个答案: