[英]How to call child components's method from the parent component in Angular 6
Parent Component 父组件
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();
}
}
Child component 子组件
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';
}
}
I am getting an error for the static injector, I am not able to inject the child component in the parent component. 我在使用静态注入器时遇到错误,无法在父组件中注入子组件。 Here is the error. 这是错误。
StaticInjectorError(AppModule)[AppComponent -> ChildComponent]: StaticInjectorError[ChildComponet]: NullInjectorError: No provider for ChildComponet! StaticInjectorError(AppModule)[AppComponent-> ChildComponent]:StaticInjectorError [ChildComponet]:NullInjectorError:没有为ChildComponet提供程序!
I have added the reference in the Appmodule and added the component in the declaration. 我在Appmodule中添加了引用,并在声明中添加了组件。 Still, I am facing the same issue. 不过,我也面临着同样的问题。
Please Help!! 请帮忙!!
Update: 更新:
just export the child like
<app-child #child></app-child>
and then you can call all methods usingchild
like :<button> (click)="child.callMethod()">Call</button>
只需像<app-child #child></app-child>
那样导出<app-child #child></app-child>
,然后您就可以使用child
来调用所有方法,例如:<button> (click)="child.callMethod()">Call</button>
Parent.html Parent.html
<app-child #child></app-child> <button (click)="child.callMethod()">Call</button>
Old answer 旧答案
You can use @ViewChild
by Parent like in example: 您可以像示例一样使用Parent的@ViewChild
:
Parent 父级
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();
}
}
Child: 儿童:
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++;
}
}
You can achieve this by introducing a concept called @Viewchild which allows allows a one component to be injected into another, giving the parent access to its attributes and functions. 您可以通过引入一个称为@Viewchild的概念来实现此目的,该概念允许将一个组件注入另一个组件,从而使父级可以访问其属性和功能。
for example: 例如:
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() { }
}
您需要在app.module.ts的声明下添加ChildComponent
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.