@ViewChild在Angular 6继承中未定义

Question

Im使用6号角实现以下示例。何时在父级中使用@ViewChild时，这种方式最终导致未定义错误。这是代码段，

基本组件

@Component({
    selector: 'comp1',
    styleUrls: ['landing.component.scss'],
    templateUrl: 'bcomponent.html'
})

export class BaseComponent implements OnInit {

    @ViewChild(QComponent) public questionModal: QComponent;

    public openQModal(): void {
         setTimeout(function() {
            this.questionModal.openModal();
        }.bind(this), 200);
    }   
}

子组件

@Component({
    selector: 'comp2',
    styleUrls: ['ccomponent.scss'],
    templateUrl: 'ccomponent.html'
})

export class ChildComponent extends BaseComponent implements OnInit {

    constructor({super ();})

} 

当我从bcomponent.html调用openQModal（）时，它工作正常，但当我从ccomponent.html调用相同的方法时，它失败，并出现“未定义”错误。

bcomponent.html

 <div class="fd-message-block--buttons-container">
                                <button #questionnaireButton
                                        id="questionnaireButton"
                                        class="fd-button fd-button_orange fd-button_16"
                                        (click)="openQModal()"
                                        [innerHtml]="landing.buttonText | safeHtml"></button>                        
</div>

ccomponent.html

 <a id="btn-back" (click)="openQModal()">Click Here!!</a>