Я пытаюсь сделать наследование с классом, но если я использую 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' of undefined
Мне нужен доступ к ViewChild в родительском, а в дочернем - он мне не нужен, но я получаю ошибку, потому что в дочернем компоненте pRef не существует.
Как можно ли использовать ViewChild и наследование одновременно?