1.调用子组件给子组件定义一个名称

<app-footer #footerChild></app-footer>

2. 引入 ViewChild

import { Component, OnInit ,ViewChild} from '@angular/core';

3. ViewChild 和刚才的子组件关联起来

 @ViewChild('footerChild') footer;

4.调用子组件

run(){

    this.footer.footerRun();

}

非父子组件通讯

1、公共的服务 2、Localstorage (推荐) 3、Cookie

angular父组件通过@ViewChild 主动获取子组 件的数据和方法的更多相关文章

  1. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  2. 在父组件中，直接获取子组件数据-vue

    1.通过 $ref 获取 主父组件中: <x-test ref="ch"></x-test> import XTest from '@/components ...

  3. vue组件通信之父组件主动获取子组件数据和方法

    ref 可以用来获取到dom节点,如果在组件中应用,也可以用来获取子组件的数据和方法. 比如,我定义了一个home组件,一个head组件,home组件中引用head组件. 此时,home组件是head ...

  4. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

  5. Vue 父组件主动获取子组件的值，子组件主动获取父组件的值

    父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header"2. 在父组件中通过this.$refs.header.属性,调用子组件的属性, ...

  6. vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法

    父组件主动获取子组件的数据和方法 1.调用子组件的时候 定义一个ref <headerchild ref="headerChild"></headerchild& ...

  7. Vue父组件主动获取子组件的数据和方法

    Vue父组件主动获取子组件的数据和方法 https://www.jianshu.com/p/bf88fc809131

  8. vue--父组件主动获取子组件的方法

    父组件主动获取子组件的方法和属性 第一步:调用自组件的时候,给自组建定义一个Header <v-header ref='headerInfo'></v-header> 第二步: ...

  9. Vue 父组件循环使用refs调用子组件方法出现undefined的问题

    Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...

随机推荐

  1. git使用——忽略文件

    一般我们总会有些文件无需纳入 Git 的管理,也不希望它们总出现在未跟踪文件列表. 通常都是些自动生成的文件,比如日志文件,或者编译过程中创建的临时文件等.git下有2种方式实现忽略文件的目的.方法一 ...

  2. 剖析可执行文件ELF组成

    对比参考:剖析.o文件ELF组成 相比.o的ELF格式,有哪些变化? .rel.text和.rel.data消失了 为什么这两个节会消失? 链接器将各.o中同名的.text和.data节整合到一起时, ...

  3. Spring Cloud 之 服务网关

    在微服务架构体系中,使用API 服务网关后的系统架构图如下: API服务网关的主要作用如下: 服务访问的统一入口 服务访问的负载均衡功能 服务访问的路由功能 在SpringCloud中,基于Netfl ...

  4. find 查找文件的命令

    find顾名思义就是查找,Linux下find命令提供相当多的查找条件,可以在众多文件或目录下查找你想要的任何文件或目录. 语法: find filename 我当前目录下有aaa.txt和bbb.t ...

  5. 使用Topshelf创建Windows服务[转载]

    概述 Topshelf是创建Windows服务的另一种方法,老外的一篇文章Create a .NET Windows Service in 5 steps with Topshelf通过5个步骤详细的 ...

  6. Java中ClassLoader浅析.

    一.问题 请在Eclipse中新建如下类,并运行它: 1 package java.lang; 2 3 public class Long { 4 public static void main(St ...

  7. 为 32 位单片机设计的脚本语言 Berry

    Berry是一款一款为32位单片机设计的脚本语言.Berry解释器使用C89标准实现,该语言可以在RAM或ROM很小的设备上运行. 尽管Berry的体积很小,但是它也支持class以及闭包等功能,使得 ...

  8. CF436E Cardboard Box（贪心）

    题意 有nnn个关卡,第iii关可以花费aia_iai​的代价打一颗星,bib_ibi​的代价打两颗星.保证1≤ai<bi≤1091\le a_i<b_i\le10^91≤ai​<b ...

  9. UWB DWM1000 开源项目框架

    UWB 目前比较火热,不论国内还是国外目前都掀起一股热潮. 但是实际工程代码很少,开源代码更少. 目前代码主要有 1 DecaWave Release的定位源码,代码基于TWR,一个非常大的状态机. ...

  10. 物联网之窄带物联网（NB-IOT）

    NB-IoT即窄带物联网(Narrow Band Internet of Things),NB-IOT构建在蜂窝网络之上,只消耗大约180KHZ的带宽,可直接部署于GSM(2G).UMTS(3G).L ...