@Viewchild抛出未定义

Question

我有一个名为SideToggleComponent的组件，该组件具有一个功能

 activeButton(value){
   ...
  } 

我想将此函数调用到另一个组件BlogComponent。 我这样使用@ViewChild

 @ViewChild( SideToggleComponent) private toggle: SideToggleComponent;
  startProject() {
      this.toggle.activeButton('');
    }

但是它给出了一个错误ERROR TypeError：无法读取未定义的属性'activeButton'。

Answer 1

Viewchild的工作方式如下：

@ViewChild('fooComponent') fooComponent: FooComponent;

因此，我们将其拆分：

1。@ViewChild（''）中的字符串是模板中的引用（使用＃-符号声明）：

<foo-component #fooComponent></foo-component>

2。括号后的'fooComponent'是属性的名称

3。冒号后面的FooComponent是组件的类名

所以最终您的代码应如下所示：

@ViewChild('sideToggleComponent') sideToggleComponent: SideToggleComponent;
startProject() {
  this.sideToggleComponent.activeButton('');
}

Answer 2

@ViewChild 用于引用父组件中的子组件。

您可以通过 2种方式使用@ViewChild。

1. 如@yannick所建议。
2. 如您所写。 您的代码没有任何问题。

我认为您缺少HTML部分。您尚未在 BlogComponent HTML中包含 SideToggleComponent 的选择器。

两种方法都是正确的。

@ViewChild将在“父组件”中寻找子组件的引用。

您必须确保在 BlogComponent 中，已使用HTML中的 SideToggleComponent ，或为 SideToggleComponent定义的任何选择器 。您必须编写此代码，以便if可以将您的@ViewChild对象与此组件进行映射。

如果您使用HTML编写相同的内容，则可能存在加载顺序问题。