markdown Angular - 从父级调用子组件函数

Posted 2021-05-06

# Angular - Call Child Component Function from Parent 

[SOURCE](https://stackoverflow.com/a/38974968/1602807)

**With type selector:**

```typescript
@Component({
  selector: 'child-cmp',
  template: '<p>child</p>'
})
class ChildCmp {
  doSomething() {}
}


@Component({
  selector: 'some-cmp',
  template: '<child-cmp></child-cmp>',
  directives: [ChildCmp]
})
class SomeCmp implements AfterViewInit{
  @ViewChild(ChildCmp) child:ChildCmp;
  
  ngAfterViewInit() {
    // child is set
    this.child.doSomething();
  }
}
```

**With string selector:**

```typescript
@Component({
  selector: 'child-cmp',
  template: '<p>child</p>'
})
class ChildCmp {
  doSomething() {}
}


@Component({
  selector: 'some-cmp',
  template: '<child-cmp #child></child-cmp>',
  directives: [ChildCmp]
})
class SomeCmp implements AfterViewInit{
  @ViewChild('child') child:ChildCmp;
  ngAfterViewInit() {
    // child is set
    this.child.doSomething();
  }
}
```