@Viewchild 抛出未定义答案

【问题标题】：@Viewchild throws undefined@Viewchild 抛出未定义
【发布时间】：2018-10-18 16:43:52
【问题描述】：

我有一个名为 SideToggleComponent 的组件，它有一个函数

 activeButton(value){
   ...
  }

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

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

但它给出了一个错误 ERROR TypeError: Cannot read property 'activeButton' of undefined.

【问题讨论】：

标签： angular

【解决方案1】：

Viewchild 的工作方式如下：

@ViewChild('fooComponent') fooComponent: FooComponent;

所以让我们分开：

1.@ViewChild('')中的字符串是模板中的引用（用#-符号声明）：

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

2.括号后面的'fooComponent'是属性名

3.冒号后面的FooComponent是组件的class-Name

所以最后你的代码应该是这样的：

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

【讨论】：

【解决方案2】：

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

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

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

这两种方法都是正确的。

@ViewChild 会在 Parent Component 中寻找 Child 组件的引用。

您必须确保在 BlogComponent 中，您在 HTML 中使用了 SideToggleComponent 或您为 SideToggleComponent 定义的任何 selector 。您必须编写此代码，以便 if 将您的 @ViewChild 对象映射到此组件。

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

【讨论】：