1

我正在尝试对一个类进行继承，但如果我使用 ViewChild，我总是会得到未定义的。我将展示我的问题的简化。

我有一个这样的父类：

@Component({
  selector: 'parent',
  template: `<h1>Hello {{name}}!</h1> <p #pRef>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class ParentComponent  {
  name: string;
  @ViewChild('pRef') public pRef: ElementRef;

  ngOnInit{
    console.log(this.pRef.nativeElement);
  }
}

然后，我有一个想要覆盖名称的孩子，例如：

@Component({
  selector: 'child',
  templateUrl: '<div></div>',
  styleUrls: [ './app.component.css' ]
})
export class ChildCOmponent extends ParentComponent {

name = 'Juan';

}

正如我之前所说，这是对我的问题的简化，但我得到了同样的错误：

ERROR 错误：无法读取未定义的属性“nativeElement”

我需要在父级和子级中访问 ViewChild 我不需要它，但我收到错误，因为在子级组件中 pRef 不存在。

如何同时使用 ViewChild 和继承？

4

1 回答 1

0

问题是 html 模板没有被继承。您的子类有''模板，其中没有#pRef 另一方面，如果您在父类中访问它，您将获得ElementRef。

可能一个好的解决方法是直接使用 document.getElementById 访问 HTMLElement 据我所知，Angular 不允许继承组件的 HTML 模板。

于 2021-02-11T16:05:06.800 回答