Angular ViewChild组件间通信demo
- ViewChild
这篇文章是Angular中组件间通信系列的一部分。虽然你可以从任何地方开始，但最好还是从头开始，对吗？
我们现在进入了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的运行方法，一切都很好！这就是我们的解决方案。所以，首先要进入的是。
以上就是Angular ViewChild组件间通信demo的详细内容，更多关于Angular ViewChild组件通信的资料请关注脚本之家其它相关文章！
相关文章
Angular 4环境准备与Angular cli创建项目详解
Angular4.0来了，更小，更快，改动少，所以下面这篇文章主要给大家介绍了关于Angular 4环境准备与学会使用Angular cli创建项目的相关资料，文中给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。2017-05-05
这篇文章主要介绍了AngularJS API之equal比较对象的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了jquery操作angularjs对象的相关资料,需要的朋友可以参考下2015-06-06
Angular2学习教程之TemplateRef和ViewContainerRef详解
这篇文章主要给大家介绍了Angular2中TemplateRef和ViewContainerRef的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-05-05
这篇文章主要介绍了Angular19 自定义表单控件的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-01-01
angular 实时监听input框value值的变化触发函数方法
今天小编就为大家分享一篇angular 实时监听input框value值的变化触发函数方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章给大家讲解四种组件类型，非常不错，具有参考借鉴价值，对angular 动态组件类型感兴趣的朋友参考下吧2017-02-02
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
这篇文章主要介绍了AngularJS使用ng-inlude指令加载页面失败的原因与解决方法,对比不同浏览器错误提示分析了加载失败的原因及通过http访问的解决方法,需要的朋友可以参考下2017-01-01
今天小编就为大家分享一篇angularjs手动识别字符串中的换行符方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了AngularJS实现tab选项卡的方法,结合实例形式较为详细的分析了AngularJS实现tab选项卡的原理、实现技巧与相关注意事项,需要的朋友可以参考下2017-07-07
最新评论