Angular中的组件间通信ViewChild（附代码）

这篇文章是Angular中组件间通讯系列的一部分。尽管你能够从任何地方开端，但最好仍是从头开端，对吗？

– ViewChild

咱们现在进入了Angular中组件间交流的最后一个办法。这是一个我不确定是否真的应该写出来的办法。你看，在我看来，运用ViewChild来让组件之间相互交流，是最后的手法。它不是那种反应式的，而且经常遇到各种比赛条件，由于你没有运用像EventEmitters和数据绑定这样的东西，而是直接调用办法。

由于上述原因，我打算把这段话说得简略一些，由于在大多数情况下，你不会运用ViewChild在组件之间进行通讯，但知道它是一种挑选仍是很好的。

经过ViewChild调用一个办法

幻想一下，我有一个像这样的AppComponent：

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child/child.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild(ChildComponent, {static : false}) childComponent : ChildComponent;
  runChild() {
    this.childComponent.run();
  }
}

它也有像这样的HTML：

<button (click)="runChild()">Click Me</button>
<app-child></app-child>

咱们现在有一个AppComponent，有一个按钮，当点击时，将 “运转 “咱们的子组件。

还注意到咱们运用了@ViewChild()指令来寻觅HTML中的ChildComponent。有几种不同的办法能够做到这一点，例如，你能够在你的HTML中运用#name格局，然后用这个名字来寻觅孩子，但重要的是，咱们能够运用@ViewChild()来寻觅html中的孩子元素，并取得它们的引用。

咱们的ChildComponent看起来像这样：

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  run() {
    //Maybe a bunch of logic here. And then we set a message. 
    console.log("Run Successfully!" );
  }
}

没有太多花哨的东西。在运转这个解决方案时，当咱们点击AppComponent中的按钮时，它就会调用ChildComponent的运转办法，一切都很好！这就是咱们的解决方案。所以，首先要进入的是。