Angular: 无法获取 ElementRef 属性

Question

我有以下代码将 this.child 克隆到 obj 中 ngAfterViewInit方法：

import { Component, Input, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'child',
  template: `<input [value]="value">`,
})
export class ChildComponent {
  @Input() value: string;
}

@Component({
  selector: 'app-root',
  template: '<child [value]="value" #child></child>',
})
export class AppComponent {
  value = 'Some value';

  @ViewChild('child') child: ElementRef;

  ngAfterViewInit() {
    var obj: any = {};
    for (let prop in this.child)
      obj[prop] = (this.child as any)[prop];
    console.log('ngAfterViewInit', obj);
    // console.log('ngAfterViewInit', this.child.value); // but this line doesn't work!
  }
}

请查看来源https://stackblitz.com/edit/angular-ivy-rhacx7?file=src/app/app.component.ts

它工作正常并且记录 obj 包含 value 属性！但是，当我取消注释 ngAfterViewInit 方法的最后一行时，它会因错误而崩溃： 属性 'value' 在类型 'ElementRef'

上不存在

我试过 this.child.nativeElement.value 但这会导致另一个错误： 无法读取未定义的属性（读取 'value'）

所以，值属性 "不存在于this.child" 但它确实存在于 obj 中（前者的克隆！）。为什么会这样？

为什么我要为“克隆操作”而烦恼？因为当我简单地将 this.child 登录到控制台时，它 did 包含 value 属性！我想，也许它是 after ngAfterViewInit 但 before 登录到控制台？这就是为什么我复制了 this.child 的状态，它在 during ngAfterViewInit.

那么，有人可以解释一下吗：

为什么链接代码不起作用？
为什么视图元素在 ngAfterViewInit 之前没有用它们的输入参数初始化？

Answer 1

那是因为 child 是 ChildComponent 类型，而不是 ElementRef:

working example

export class AppComponent {
  value = 'Some value';

  @ViewChild('child') child: ChildComponent;

  ngAfterViewInit() {
    var obj: any = {};
    for (let prop in this.child)
      obj[prop] = (this.child as any)[prop];
    console.log('ngAfterViewInit', obj);
    console.log('ngAfterViewInit', this.child.value);
  }
}

因此不需要克隆数据，该值已设置，只是 TypeScript 抱怨 ElementRef 没有属性 value，这它没有。

Angular: 无法获取 ElementRef 属性

Angular: Cannot get ElementRef property

angular

view

init