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. 异常-Maxwell无法全量同步触发

      因为之前插入错误的表导致同步失败的问题     重新启动Maxwell,重新插入初始化表 重新触发 

  2. Springboot整合cxf后不能访问controller,不能访问接口

    参考版本 springboot 1.4.X <=========> cxf-spring-boot-starter-jaxws 3.1.X springboot 1.5.X <=== ...

  3. XSS挑战之旅平台通关练习

    1.第一关 比较简单,测试语句: <svg/onload=alert(1)> <script>confirm(1)</script> <script>p ...

  4. pringBoot2.0启用https协议

    SpringBoot2.0之后,启用https协议的方式与1.*时有点儿不同,贴一下代码. 我的代码能够根据配置参数中的condition.http2https,确定是否启用https协议,如果启用h ...

  5. [原创]extjs htmleditor增加截图快速粘贴功能 插件

    因客户需求,需要QQ截图后,能直接粘贴到htmleditor编辑器中,不要保存本地文件再上传,再插入到编辑器,太过麻烦. 常规做法:QQ截图-->选择保存路径-->确定保存文件--> ...

  6. P2921 [USACO08DEC]在农场万圣节[SCC缩点]

    题目描述 每年,在威斯康星州,奶牛们都会穿上衣服,收集农夫约翰在N(1<=N<=100,000)个牛棚隔间中留下的糖果,以此来庆祝美国秋天的万圣节. 由于牛棚不太大,FJ通过指定奶牛必须遵 ...

  7. ASP.NET六大巨头——内置对象（2）

    前面讲了三个内置对象,后面来探究一下另外三个内置对象Session.Server和Cookie,Session对象就是服务器给客户端的一个编号:Server对象提供对服务器上的方法和属性的访问:coo ...

  8. 2019-2020-1 20199312《Linux内核原理与分析》第二周作业

    c语言代码 // main.c int g(int x) { return x + 4; } int f(int x) { return g(x); } int main(void) { return ...

  9. c++ 智能指针的使用

    https://www.cnblogs.com/TenosDoIt/p/3456704.html #include <QCoreApplication> #include <stri ...

  10. ES6遍历器 生成器 学习整理

    遍历器[迭代器](Iterator) 就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所 ...