Angular ViewChild组件间通信demo

目录
  • - ViewChild
    • 通过ViewChild调用一个方法

- 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组件通信的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • angular父子组件通信详解

    angular父子组件通信详解

    目录 用到的api 简单的例子 person.ts 父组件 子组件 效果 总结 用到的api Input - 子组件中定义可接受的属性,可以用来父组件给子组件传递数据 Output - 子组件中定义输出的属性,该属性需要是 EventEmitter 的事件类型,用来通知父组件做出相应的操作 EventEmitter - 用在带有 @Output 指令的组件中,以同步或异步方式发出自定义事件,并通过订阅实例来为这些事件注册处理器. 简单的例子 列表渲染子组件,点击子组件通知父组件进行操作 pers

  • Angular封装WangEditor富文本组件的方法

    Angular封装WangEditor富文本组件的方法

    富文本组件是web程序中很常用的一个组件,特别是要开发一个博客,论坛这类的网站后台. 得益于Angular的强大,封装WangEditor组件非常简单 1.使用yarn或者npm安装wangeditor yarn add wangeditor 2.创建一个Angular的组件 ng g c q-wang-editor 3.封装组件逻辑 3.1 模板 <div #wang></div> 3.2 ts逻辑 import { Component, ElementRef, EventEmi

  • Angular懒加载动态创建显示该模块下声明的组件

    Angular懒加载动态创建显示该模块下声明的组件

    目录 环境: Angular 13.x.x 新建一个angular项目 懒加载工具栏组件 toolbar.module.ts toolbar.component.ts toolbar.component.html app.component.ts 环境: Angular 13.x.x angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组件我不希望它默

  • Angular 独立组件入门指南

    目录 Angular 独立组件入门 创建组件 组件输入 组件输出 Angular 独立组件入门 如果你正在学习 Angular,那么你可能已经听说过独立组件(Component).顾名思义,独立组件就是可以独立使用和管理的组件,它们能够被包含在其他组件中或被其他组件引用. 在本文中,我们将学习如何创建简单的独立组件以及如何在 Angular 应用程序中使用它们. 创建组件 要创建一个 Angular 组件,首先需要使用 Angular CLI 工具生成一个空的组件骨架.假设我们要创建一个名为 h

  • 简单谈谈Angular中的独立组件的使用

    简单谈谈Angular中的独立组件的使用

    目录 前言 如何创建一个独立组件 在独立组件中导入已有的模块 使用独立组件启动Angular应用 为独立组件配置路由 配置依赖注入 源代码 前言 Angular 14一项令人兴奋的特性就是Angular的独立组件终于来了. 在Angular 14中, 开发者可以尝试使用独立组件开发各种组件,但是值得注意的是Angular独立组件的API仍然没有稳定下,将来可能存在一些破坏性更新,所以不推荐在生产环境中使用. 如何创建一个独立组件 对于已有的组件,我们可以在@Component()中添加stand

  • 详解Angular组件数据不能实时更新到视图上的问题

    目录 问题起源 OnPush策略 当前组件或子组件之一触发了事件 总结 问题起源 MainComponent: @Component({ selector: 'main', template: ` <MenuComponent [isReport]="isReport"> </MenuComponent> `, changeDetection:ChangeDetectionStrategy.OnPush }) export class MainComponent

  • Angular ViewChild组件间通信demo

    目录 - ViewChild 通过ViewChild调用一个方法 - ViewChild 这篇文章是Angular中组件间通信系列的一部分.虽然你可以从任何地方开始,但最好还是从头开始,对吗? 我们现在进入了Angular中组件间交流的最后一个方法.这是一个我不确定是否真的应该写出来的方法.你看,在我看来,使用ViewChild来让组件之间相互交流,是最后的手段.它不是那种反应式的,而且经常遇到各种竞赛条件,因为你没有使用像EventEmitters和数据绑定这样的东西,而是直接调用方法. 由于

  • 详解Angualr 组件间通信

    Angualr 组件间通信 约定: 遵循Angular官方的说法,下文中的AngularJS代指1.x版本,Angular代指Angular2及以后的升级版本. 采用Angular(或者任意MV*)的前端框架开发单页应用(SPA)时,我们都可能会遇见如下的场景: A组件和B组件之前需要相互通信,或是A路由状态需要知道B路由状态的信息等等业务需求. 这个时候就需要设计到采用一套合理的通信方案来解决数据同步,数据通信的问题. AngularJS 组件间的数据通信 在AngularJS中,也就是Ang

  • vue组件间通信六种方式（总结篇）

    前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props. $emit / $on .vuex. $parent / $children . $attrs

  • vue组件间通信子与父详解（二）

    接着vue组件父与子通信详解继续学习. 二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ //参数msg就是子组件通过事件出来的数据 } } ②绑定事件处理函数 事件一般情况 都是自定义事件 <child-component @myEvent="recvMsg"></child-component> ③在子组件触发

  • vue组件间通信解析

    组件间通信(父子,兄弟) 相关链接\组件通信:点击查看 学习链接:Vue.js--60分钟快速入门点击查看 分分钟玩转Vue.js组件点击查看 父组件传子组件 父传子方法(一) 属性传递 props //子组件 <template> <ul> <li v-for="item in dataList">{{item}}</li> </ul> </template> <script> export defa

  • 详解Vue2中组件间通信的解决全方案

    详解Vue2中组件间通信的解决全方案

    前言 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,下面这篇文章将给大家介绍关于Vue2组件间通信的相关内容,下面话不多说,来一起看看详细的介绍. 组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> <Child :child-msg="msg"></Child> </templat

  • Vue 父子组件、组件间通信

    本人对Vue组件间通信不懂,搜索了很多关于Vue 父子组件间通信介绍,下面我来记录一下,有需要了解Vue 父子组件.组件间通信的朋友可参考.希望此文章对各位有所帮助. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <meta name="viewport"

  • vue2.0父子组件间通信的实现方法

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] };} 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arra

  • 深入理解Android组件间通信机制对面向对象特性的影响详解

    组件的特点对于Android的四大组件Activity, Service, ContentProvider和Service,不能有Setter和Getter,也不能给组件添加接口.原因是组件都是给系统框架调用的,开发者只能实现其规定的回调接口,组件的创建与销毁都是由系统框架控制的,开发者不能强行干预,更没有办法获取组件的对象.比如Activity,Service,BroadcastReceiver,你没有办法去创建一个Activity,Service或BroadcastReceiver,然后像使

  • Vue组件间通信 Vuex的用法解析

    Vue组件间通信 Vuex的用法解析

    上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex.Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库). 首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了.我是通过npm方式安装的: npm install vuex --save 安装好之后需要再main.js里全局引入: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)new Vue({el:'#app',store,components

随机推荐