从父组件中调用子组件的方法指南（附代码）

在一些非常罕见的情况下，你可能需要直接从父组件中调用子组件的方法。一般来说，这应该被看作是最后的手段。在大多数情况下，组件通信应该限于数据绑定（包括输入和输出），以及在某些情况下，使用服务在两个组件之间发送值。

然而，有些时候，我在两个组件之间出现了竞赛条件，而这些条件只有通过非常精确的方法调用顺序才能解决。这意味着，我需要它们同步发生。为此，这个方法是一个救命稻草，而且也很简单

考虑到我有以下组件：

``` @Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.scss'] }) export class ParentComponent implements OnInit { }

```

我也有一个这样的子组件：

``` @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss'] }) export class ChildComponent implements OnInit { callMe(value : string) { console.log('Called : ' + value); } }

```

在parent.component.html的视图中，我放置了子组件：

```

```

现在在我的父组件中，我可以像这样使用ViewChild来获得对子组件的直接引用：

``` export class ParentComponent implements OnInit { @ViewChild(ChildComponent, {static : true}) child : ChildComponent; }

```

注意，我没有像我们有时使用ViewChild那样传入一个 "字符串 "来查找，我们传入的是我们正在寻找的组件的实际类型。

然后，这就像在我们的孩子身上调用一些东西一样简单：

``` export class ParentComponent implements OnInit { @ViewChild(ChildComponent, {static : true}) child : ChildComponent;

callMyChild(){
    child.callMe('Calling from the parent!');
}

}

```

然而，通常的ViewChild规则适用，一般来说，你只能在视图初始化后访问ViewChild引用（所以你不能在ngOnInit方法中访问它们，你必须使用ngAfterViewInit）。

同样，使用数据绑定或 "连接服务 "来让两个组件进行通信通常会好得多。但往往很难同步需要发生的动作的精确顺序。因此，对于这一点，ViewChild是赢家。