父组件

Question

父组件

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]： StaticInjectorError [ChildComponet]： NullInjectorError：没有为ChildComponet提供程序！

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

请帮助！

Answer 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

Answer 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() { }
  }

Answer 3

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

如何在Angular 6中从父组件调用子组件的方法

3 个答案:

父组件

子组件