父组件模板中引用子组件

 // father  template: ...

    <child-item [name] = "fatherItemName" > </child-item>

//...`

其中”fatherItemName” 为父组件中的属性,[name] 为子组件的输入

在子组件中使用 @Input() name 来接受父组件传递的值

如果在接收值前需要进行一些处理,可以使用setter 拦截输入属性

_name: string = '';

@Input()

set nameStr(name: string){

_name = "father name:" + name;

}

这时的 _name 作为临时变量,作为set 和get的中转。其实_name就是我们要组件中要用到的真实属性
父组件中:
< child-item [namestr] = “fatherItemName” >
name -> namestr
使用getter 输出

get nameStr(){ return _name; }

插值时 {{ nameStr }}

子到父组件之间的数据传递

1. 事件传值

    // father  template: ...

    <child-item (childEvent) = "fatherFunction($event)">  </child-item>

    //...

      export class FatherComponent{

        fatherFunction(){

          alert('hello!');

      }

    }

子组件

    //...
< p (click) = "clickThis"> click </ p>
//...
@Output() childEvent = new EventEmitter<boolean>();
clickThis(){
this.childEvent.emit();
}

2.父组件通过局部变量获取子组件的引用

<child-item [name] = "fatherItemName" #name > </child-item>

子组件通过#绑定一个name的局部变量来访问子组件的属性

3.使用@ViewChild 获取子组件的引用

@ViewChild(ChildComponent)  child: ChildComponent;

angularjs2中的父子组件通信的更多相关文章

  1. vue中v-model父子组件通信

    有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值.是怎么实现的呢? 实际上v-model 只是语法糖而已. <input v-model="inpu ...

  2. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  3. Vue2.x中的父子组件相互通信

    业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template ...

  4. Vue 非父子组件通信方案

    Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...

  5. vue父子组件及非父子组件通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  6. Vue(二十六)父子组件通信

    今天写了一个分页公共组件,就出现了父子组件通信的问题,今天来总结下我遇到的父子组件通信问题 一.子组件调取父组件的数据或方法 (1)props 想要把父组件的值,传到子组件中,使用props 比如你在 ...

  7. 三大前端框架(react、vue、angular2+)父子组件通信总结

    公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...

  8. vue 父子组件通信

    算是初学vue,整理一下父子组件通信笔记. 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 一.父组件向子组件下发数据: 1.在子组件中显式地用props选项声明它预期的数据 ...

  9. Vuejs——(10)组件——父子组件通信

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

随机推荐

  1. 如何让springboot中的某些html文件不经过thymeleaf模板解析?

    这个thymeleaf有时有用,有时用不着. 但默认设置,所有的html都会经过它解析. 我的作法,是新建public,在resource里,所有css,js所放里面.(当然,static下也是OK的 ...

  2. DotNetCore 笔记

    最近公司框架升级到DotNetCore了,但是在用post请求的时候,发现页面的post data后台并没有接收到数据,经过调查发现,netcore用法和之前的MVC5不一样,想要接收post里的da ...

  3. 如何打造属于自己的Javascript武器库(封装方法)

    前言 代码写的久了,就会发现很多时候都是在写一些重复的东西,这个时候就应该要考虑到提高工作效率了,比如对常用方法的封装,例如日期格式化,浏览器类型判断等. 今天这篇文章我们就来看看如何封装常用的Jav ...

  4. 计蒜客 18492.Upside down primes-米勒拉宾判大素数 (German Collegiate Programming Contest 2015 ACM-ICPC Asia Training League 暑假第一阶段第三场 K)

    K. Upside down primes 传送门 这个题就是把大数按字符串输进去,判断一下是不是素数,然后反转180度,先判断反转之后的东西是不是一个数,如果是的话,再把这个数判一下是不是素数,如果 ...

  5. N皇后问题(C++实现和函数式编程实现)

    题意 在 N * N 的方格棋盘放置了 N 个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上.求出有多少种合法的放置方法. C++实现(位运算 ...

  6. Redis单机部署、添加开机自启、配置参数

    1.Redis简介 redis是使用C语言编写的开源的,支持网络,基于内存,可持久性的键值对存储数据库,2013年5月之前,Redis是最流行的键值对存储数据库,Redis采用内存数据集,支持多种数据 ...

  7. Requirement Analysis

    BRD:Business Requirements Document,商业需求文档.这是产品声明周期中最早的问的文档,再早就应该是脑中的构思了,其内容涉及市场分析,销售策略,盈利预测等,通常是和老大们 ...

  8. 解决虚拟机安装tomcat主机访问不到

    在wmware中安装linux后安装好数据库,JDK及tomcat后启动服务,虚拟机中可以访问,但是主机却无法访问,但是同时主机和虚拟机之间可以ping的通.解决方法是关闭虚拟机中的防火墙服务.桌面- ...

  9. ScrollView起始位置不是最顶部的解决办法

    最近遇到了打开带有ScrollView的页面布局默认起始位置不是最顶部的情况,最后发现问题是因为ScrollView内部嵌套了gridview,只需要设置gridview获取焦点为false即可. g ...

  10. 初识交替最小二乘ALS

    ALS是alternating least squares的缩写 , 意为交替最小二乘法:而ALS-WR是alternating-least-squares with weighted-λ -regu ...