【问题标题】：How to call child components's method from the parent component in Angular 6如何从Angular 6中的父组件调用子组件的方法
【发布时间】：2019-04-03 02:00:42
【问题描述】：

父组件

import { Component } from '@angular/core';
import { ChildComponent }  from './notify.component';

@Component({
    selector: 'my-app',
    template:
    `
    <button (click)="submit()">Call Child Component Method</button>
    `
})
export class AppComponent {
    constructor(private childComp: ChildComponent) { 
    }

    submit(): void {
        // execute child component method
        // This line is compiled properly but at the run time it gives me error related to the static injector## Heading ##
        childComp.callMethod();
    }
}

子组件

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'child',
    template: '<h3>Child component {{test}}</h3>'
})
export class ChildComponent implements OnInit {
   test:string; 
   constructor() { }

    ngOnInit() { }

    callMethod(): void {
        console.log('successfully executed.');
        this.test = 'Me';
    }
}

静态注入器出现错误，我无法在父组件中注入子组件。这是错误。

StaticInjectorError(AppModule)[AppComponent -> ChildComponent]：静态注入器错误[子组件]： NullInjectorError: 没有 ChildComponet 的提供者！

我在 Appmodule 中添加了引用，并在声明中添加了组件。不过，我也面临同样的问题。

请帮忙！！

【问题讨论】：

使用@ViewChild 看看alligator.io/angular/viewchild-access-component
@Vikas 我用过同样的方法，但我收到了“预期声明”这个问题。当我尝试在组件中编写 @ViewChild('child') child:ChildCmp; 时出现错误。请帮忙！
@ViewChild('child') child:ChildCmp; 你的类型在哪里ChildCmp??我看到ChildComponent 不是ChildCmp。
@Developer 使用 rx js 主题。你可以试试我的方法。不推荐创建组件实例
@penleychan 是的，它的 ChildComponent 是我的错字。

标签： angular typescript

【解决方案1】：

更新：

只需像<app-child #child></app-child> 一样导出孩子，然后您可以使用child 调用所有方法，例如：<button> (click)="child.callMethod()">Call</button>

Parent.html
<app-child #child></app-child>
<button (click)="child.callMethod()">Call</button>

旧答案

您可以通过 Parent 使用 @ViewChild，例如：

家长

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() { }
  @ViewChild(ChildComponent) private myChild: ChildComponent;
  submit() {
    this.myChild.callMethod();
  }
}

孩子：

import { Component } from '@angular/core';

@Component({
  selector: 'child',
  template: `<h3>Child component {{test}}</h3>`
})
export class ChildComponent {
  test = 0;
  callMethod() {
    console.log('successfully executed.');
    this.test++;
  }
}

Here is a worked example

【讨论】：

我想调用子组件的方法，我的要求是，如果变量的值发生变化或者它保持不变，那么子组件的特定函数应该调用它将返回我的数据服务。
OnSubmit 你只需要改变输入，你的方法就会被调用
我的值保持不变，在这种情况下不会调用 Onchange 生命周期挂钩。或者有任何可用的生命周期挂钩？（值更改或保持函数应调用的相同）并且我正在从父组件的函数调用此函数。
我已经有两个可用的组件，只想在它们之间进行通信。无法为其创建共享服务。因为我必须从子组件的方法进行服务调用。都是预定义的只想调用子函数中的
太棒了！这就是我想要的。谢谢

【解决方案2】：

您可以通过引入一个名为@Viewchild 的概念来实现这一点它允许将一个组件注入到另一个组件中，从而使父组件可以访问其属性和功能。

例如：

父组件

   import { Component, ViewChild, AfterViewInit } from '@angular/core';
   import { ChildComponent } from "../child/child.component";
    @Component({
    selector: 'app-parent',
    template: `
    Message: {{ message }}
 <app-child></app-child>
    `,styleUrls: ['./parent.component.css']
    })
    export class ParentComponent implements AfterViewInit {

@ViewChild(ChildComponent) child;

constructor() { }

message:string;

ngAfterViewInit() {
this.message = this.child.message
  }
 }

子组件

    import { Component} from '@angular/core';
    @Component({
    selector: 'app-child',
    template: `
    `,
    styleUrls: ['./child.component.css']
    })
    export class ChildComponent {
    message = 'Hola Mundo!';
    constructor() { }
  }

【讨论】：

我收到此错误“错误 TS1146：预期声明”。 @ViewChild(ChildComponent) 孩子；并在孩子的身下变红。
请在下面添加这个语句 import {Component, View} from 'angular2/core';

【解决方案3】：

您需要在 app.module.ts 的声明下添加 ChildComponent

【讨论】：

我收到此错误“错误 TS1146：预期声明”。 @ViewChild(ChildComponent) 孩子；并在孩子的身下变红。