Наследование с ViewChild Angular 8

Я пытаюсь сделать наследование с классом, но если я использую 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';

}

Как я уже говорил, это упрощение моей проблемы, но я получаю ту же ошибку, что и:

ОШИБКА Ошибка: невозможно прочитать свойство 'nativeElement' неопределенного

Мне нужен доступ к ViewChild в родительском, а в дочернем мне это не нужно, но я получаю сообщение об ошибке, потому что в дочернем компоненте pRef не существует.

Как я могу использовать ViewChild и наследование одновременно?