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. JDK源码那些事儿之ArrayBlockingQueue

    线程在JDK中是非常重要的一块内容,所有的应用服务都离不开线程的相关操作,对于大量线程的使用都是推荐使用线程池来进行操作和管理,JDK本身提供的线程池在服务中经常被使用到,以往经常使用Executor ...

  2. eclipse等编辑器选中列快编辑的方法

    一.eclipse 1.首先按alt+shift+a,开启块选择模式 2.使用鼠标进行块选择 3.再次按Alt+Shift+a即可关闭块选择模式 二.EditPlus 1.菜单:编辑 -> 选择 ...

  3. Spring Boot 项目在 IntelliJ IDEA 中配置 DevTools 实现热部署（macOS 系统）

    要配置的内容: 1.Preference -> Build, Execution, Deployment -> Complier -> Build project automatic ...

  4. 云计算(6)--一些MapReduce的例子

    例1:文件的字符串查找 这里reduce不做merge的工作,因为每行都是不一样的,不能merge. 与传统的grep程序相比,使用MapReduce可以加快处理,因为1它是Distributed的, ...

  5. java中创建对象的方式

    Java中有5种创建对象的方式,下面给出它们的例子还有它们的字节码 使用new关键字 } → 调用了构造函数 使用Class类的newInstance方法 } → 调用了构造函数 使用Construc ...

  6. CF C. Vladik and fractions——构造题

    题目 构造一组 $x, y, z$,使得对于给定的 $n$,满足 $\frac{1}{x}  + \frac{1}{y} + \frac{1}{z} =  \frac{2}{n}$. 分析: 样例二已 ...

  7. js实现图片上传实时显示

    在开发的时候经常遇到这样的需求,用户在上传图片的时候,想要看到自己上传的图片是否正确,这时候需要把用户上传的图片及时显示出来,然后等他点击上传的时候,程序再执行上传到服务器. <!DOCTYPE ...

  8. [RxJS] Convert a Node.js style callback to Observable: bindNodeCallback

    It's just like bindCallback, but the callback is expected to be of type callback(error, result). imp ...

  9. SIGAI机器学习第四集 基本概念

    大纲: 算法分类有监督学习与无监督学习分类问题与回归问题生成模型与判别模型强化学习评价指标准确率与回归误差ROC曲线交叉验证模型选择过拟合与欠拟合偏差与方差正则化 半监督学习归类到有监督学习中去. 有 ...

  10. php流程控制之if else语法

    php流程控制之if else语法 if和else语法 这是一个非常重要的章节,也是PHP当中的一个重要的语法. [注意]我对这个语法的定义级别为:默写级别.也就是你需要,闭着眼睛,都能够写出来的东西 ...