Question

我对父html的click事件具有功能。

<span (click)="onFilterClick()" class="filter-icon">
<mat-icon>keyboard_arrow_down</mat-icon></span>
<m-scp-filter-template [openFilter]="true" *ngIf="templateFor === 'col1' "></m-scp-filter-template>

父ts的

子组件

@ViewChild(ScpFilterTemplateComponent) myChild;

父ts处的函数

onFilterClick() {
  this.myChild.openMenu();
}

并在子ts处调用了函数

openMenu() {
     console.log('successfully executed.');
}

但出现错误

'TypeError：无法读取未定义的属性'openMenu' 在ScpDataTableComponent上。”

Answer 1

您可以尝试二传手吗？

@ViewChild(ScpFilterTemplateComponent) 
set _myChild(v) {
  setTimeout(() => { this.myChild= v; }, 0);
}

或将this.myChild.openMenu();包装在超时等中

Answer 2

由于@ViewChild引用了现有的子视图/选择器，因此您的 子视图需要存在于父HTML 中。如果您的*ngIf返回 false ，则Angular甚至不会在父HTML中创建子视图。因此，在这种情况下，您的 myChild 本身未定义 ，您将无法进一步访问任何方法/属性。

还有一个替代旁路-您可以创建子类的实例并调用该方法，但是 不推荐使用 。

Here 是这两种情况的最小再现。

Answer 3

这里是Angular文档https://angular.io/guide/component-interaction#parent-calls-an-viewchild

的副本

import { AfterViewInit, ViewChild } from '@angular/core';
import { Component }                from '@angular/core';
import { CountdownTimerComponent }  from './countdown-timer.component';

@Component({
  selector: 'app-countdown-parent-vc',
  template: `
  <h3>Countdown to Liftoff (via ViewChild)</h3>
  <button (click)="start()">Start</button>
  <button (click)="stop()">Stop</button>
  <div class="seconds">{{ seconds() }}</div>
  <app-countdown-timer></app-countdown-timer>
  `,
  styleUrls: ['../assets/demo.css']
})
export class CountdownViewChildParentComponent implements AfterViewInit {

  @ViewChild(CountdownTimerComponent)
  private timerComponent: CountdownTimerComponent;

  seconds() { return 0; }

  ngAfterViewInit() {
    // Redefine `seconds()` to get from the `CountdownTimerComponent.seconds` ...
    // but wait a tick first to avoid one-time devMode
    // unidirectional-data-flow-violation error
    setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0);
  }

  start() { this.timerComponent.start(); }
  stop() { this.timerComponent.stop(); }
}

在示例中，当单击父组件的按钮时，start()和stop()方法调用子组件的相应方法

如果子组件具有* ngIf设置，则可以通过以下方法对其进行修复 Angular 2 @ViewChild in *ngIf

如何通过事件从父组件触发子函数

3 个答案: