如何从父组件调用子组件方法

Question

我有一个父子组件，如下所示。child.compontent.ts内部,我有一个方法:childFunction()。我想在父函数中调用这个方法。如何做到这一点?

**Parent.html :** 
<div class="box">
<input type="text" (input)="searchValue=$event.target.value" placeholder={{placeHolder}} />

<btn-icon [searchType]='searchType' [searchText]='searchValue'></btn-icon> // child component
</div>
**parent.component.ts :**
export class parentComponent implements OnInit {
parentFunction(){
// **Call** childFunction('inputValue');
}

**btn-icon  is Child :**
**btn-icon.component.ts:  (Child)**
export class btn-iconimplements OnInit {

@Input() Type: string;
@Input() Text: string;
childFunction(inputValue){
//some logic
}
}

Answer 1

使用ViewChild获取子元素

export class parentComponent implements OnInit {
@ViewChild(btn-icon) bt-icon //see that viewChild argument is 
//the classname of your child-component
parentFunction(){
this.bt-icon.childFunction('inputValue');
}
}

也可以使用模板引用并将其作为参数传递给函数，例如

<div class="box">
<!--see how, in input event you pass the template reference "child" futhermore
$event.target.value-->
<input type="text" (input)="change(child,$event.target.value)"
placeholder={{placeHolder}} />

<!--see the "#child", it's a template reference-->
<btn-icon #child [searchType]='searchType' [searchText]='searchValue'></btn-icon> 
</div>

change(childComponent:bt-icon,value){
chilComponent.childFunction(value)
}

Answer 2

可以注入使用装饰器@ViewChild():

的子组件

@ViewChild(btn-icon)
private btnIcon: btn-icon;

然后你可以像往常一样访问它的属性:

this.btnIcon.childFunction();

Answer 3

你应该在父组件中使用@ViewChild:

export class parentComponent implements OnInit {
@ViewChild(BtnIcon)    btnIcon;

parentFunction(){
btnIcon.childFunction();
}

btnIcon属性只有在ngAfterViewInit()生命周期钩子之后才能被子组件填充。

注意:我使用的类名BtnIcon是驼峰字体，而不是"btn-icon"以你为例。