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. MySql 安装及实用笔记

    安装 更新 rpm 包 rpm -Uvh http://repo.mysql.com//mysql57-community-release-el7-7.noarch.rpm 安装MySql yum - ...

  2. Alpha2版本相互测试

    [作业信息] Q A 作业所属课程 https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesign/ 作业要求 https: ...

  3. 模仿DotnetCore中间件的方式，做一个列表过滤的功能

    我们的很多功能当中都会遇到对版本进行过滤的场合,例如你可能需要对列表中的数据的时间进行过滤.版本过滤.渠道以及地区信息进行过滤. 原本的做法:设计很多个过滤方法,通过枚举的方式组合,选择需要过滤哪些方 ...

  4. web开发常见的鉴权方式

    结合网上找的资料整理了一下,以下是web开发中常见的鉴权方法: 预备:一些基本的知识 RBAC(Role-Based Access Control)基于角色的权限访问控制(参考下面①的连接) l    ...

  5. jmap与jstat工具实战分析

    在上一节[https://www.cnblogs.com/webor2006/p/10662363.html]最后其实是抛出了infoq关于元空间介绍的文章中所涉及到JDK自带的一些工具的使用,这次咱 ...

  6. JS 使用RSA加密解密

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>使 ...

  7. python开发的百度翻译接口

    做的一个python版的百度翻译,附代码 #!/usr/bin/env python # -*- coding:utf-8 -*-   ''' 爬虫之百度翻译 需要的库有 js2py, request ...

  8. Java原子类--AtomicLongArray

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/3514604.html AtomicLongArray介绍和函数列表 在"Java多线程系列-- ...

  9. Coins in a Line II

    There are n coins with different value in a line. Two players take turns to take one or two coins fr ...

  10. Linq找不到行或行已更改

    1.发生这种情况第一时间是确认了database明明存在这条数据 2.然后确认了Linq查找的条件中是否有连接条件使得连续更新中发生变化 3.最后发现原来是Linq使用的表实际中有个field由not ...