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. C++——流类库和输入/输出

    前言 数据是怎么写道磁盘的? 代码里面我们一个读写调用似乎就能将数据从磁盘读写.仿佛代码是直接和磁盘打交道.以我们最常见的笔记本.或台式机的磁盘SATA盘为例,其受南桥上ATA控制器支配,这里面传输的 ...

  2. 应用程序域 System.AppDomain,动态加载程序集

    一.概述 使用.NET建立的可执行程序 *.exe,并没有直接承载到进程当中,而是承载到应用程序域(AppDomain)当中.在一个进程中可以包含多个应用程序域,一个应用程序域可以装载一个可执行程序( ...

  3. 除了不要 SELECT * ，程序员使用数据库还应知道的11个技巧

    SQL:sum里加条件SELECT SUM( CASE WHEN "V7010" BETWEEN 0 AND 0.1 THEN 1 ELSE 0 END) FROM "C ...

  4. vue 使用element ui报错解决方案

    安装: npm i element-theme-default -S main.js增加 import ElementUI from 'element-ui' import 'element-ui/l ...

  5. czy的后宫——矩阵快速幂优化DP

    题意 有 n 个位置排成一行,可以放 m 种妹子.每个位置可以放也可以不放,规定某些妹子不能相邻,求方案数. 分析 #include<bits/stdc++.h> using namesp ...

  6. hadoop各版本下载地址

    http://mirror.bit.edu.cn/apache/hadoop/common/

  7. jquery 使用off移除事件 使用one绑定一次事件，on绑定事件后触发多次相同的事件的异常

    <!-- jquery 移除事件,绑定一次事件,搜狗 one --> <!DOCTYPE html> <html lang="en"> < ...

  8. IE下iframe不能正常加载,显示空白

    下午帮忙看了一个web问题,index.html中嵌入<iframe>来加载同文件目录下的一个页面,在多个浏览器下测试,发现IE浏览器中会出现问题,<iframe>不能正常加载 ...

  9. 转,异常好的sql 基础知识整理

    转载自:http://blog.csdn.net/u011001084/article/details/51318434 最近从图书馆借了本介绍SQL的书,打算复习一下基本语法,记录一下笔记,整理一下 ...

  10. Greenplum 如何直连segment节点

    Greenplum   展开阅读全文 直连greenplum segment节点的方法, utility模式 : 使用这种方式,不与其他节点通讯,只操作当前节点.也没有数据分布的概念. 如果使用uti ...