Angular 4中无法通过@ViewChild调用子组件函数问题求助

我来帮你拆解下问题所在，一步步解决这个报错：

核心错误原因 #

你当前的写法有两个关键问题：

1. 用ElementRef去获取第三方组件实例：ngc-float-button是一个封装好的组件，不是原生DOM元素，ElementRef只能拿到DOM节点，拿不到组件的方法和属性。
2. 模板选择器使用错误：你用'float-button'对应HTML里的id，但Angular的@ViewChild要通过模板引用变量（而非id）来定位组件，或者直接用组件类型获取。

分步解决方案 #

1. 修改HTML模板，添加模板引用变量 #

把HTML里的id="float-button"改成模板引用变量（用#前缀），这样Angular才能正确识别要获取的组件：

<ngc-float-button #floatButton 
                  icon="add" 
                  color="#c0392b" 
                  class="ngc-float-button-container ngc-float-button-main-button" 
                  (click)="ngcFloatButtonData.onToggle()" 
                  [direction]="ngcFloatButtonData.direction">
</ngc-float-button>

2. 正确获取组件实例并调用方法 #

首先导入第三方组件的类型（如果库提供了类型定义），然后用组件类型或模板引用变量来获取实例，替换原来的ElementRef：

import {Component, OnInit, ViewChild} from '@angular/core';
// 导入ngc-float-button组件（根据库的实际导出路径调整）
import {NgcFloatButtonComponent} from 'ngc-float-button';

export class CalendarComponent implements OnInit {
 // Material Design Float Button配置
 ngcFloatButtonData = {
 direction: 'up',
 open: false,
 // 改用箭头函数，确保this指向组件实例
 onToggle: (): void => {
 this.ngcFloatButtonData.open = !this.ngcFloatButtonData.open;
 },
 close: (): void => {
 this.ngcFloatButtonData.open = false;
 }
 };

 // 通过模板引用变量获取组件实例
 @ViewChild('floatButton') public floatButton: NgcFloatButtonComponent;

 constructor(
 public dialog: MatDialog,
 public el: ElementRef,
 ) { }

 decrement(): void {
 // 现在可以正常调用组件的close方法了
 this.floatButton.close();
 }

 ngOnInit(): void {
 // 可选：初始化时确认实例是否加载成功
 console.log('float button instance:', this.floatButton);
 }
}

额外修复：this指向问题 #

你原来的onToggle和close用了普通函数，导致函数内部的this指向的是ngcFloatButtonData对象，而非组件实例。改用箭头函数后，this会正确指向组件，确保属性修改逻辑正常。

其他排查点 #

• 确认第三方库已正确安装并在模块中导入（比如在app.module.ts里声明NgcFloatButtonComponent或导入对应的模块）。
• 如果组件是在*ngIf这类结构指令内部，@ViewChild可能会延迟初始化，这时候可以添加{static: false}（Angular 8+默认就是该配置），或者用ViewChildren监听实例变化。

内容的提问来源于stack exchange，提问作者Zabs