父组件模板中引用子组件

 // 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. J.U.C并发框架源码阅读(四)CountDownLatch

    基于版本jdk1.7.0_80 java.util.concurrent.CountDownLatch 代码如下 /* * ORACLE PROPRIETARY/CONFIDENTIAL. Use i ...

  2. Codeforces Round #321 (Div. 2) A. Kefa and First Steps【暴力/dp/最长不递减子序列】

    A. Kefa and First Steps time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  3. JSK 11: 移除数组中的重复元素

    题目描述 给定一个升序排列的数组,去掉重复的数,并输出新的数组的长度. 例如:数组 $A = \{1, 1, 2\}$,你的程序应该输出 $2$ 即新数组的长度,新数组为 $\{1, 2\}$. 要求 ...

  4. nginx.conf及server配置

    #服务运行用户 user sysadmin www; #工作进程数 worker_processes 4; #错误日志位置 error_log /data/sysadmin/service_logs/ ...

  5. 玩转Nuget服务器搭建(三)

    前两篇已经介绍了如何打包.如何搭建nuget server web站点,接下来让我们介绍一下,如何在我们的vs中访问我们自己搭建的nuget服务器中的包. vs访问我们自己的nuget服务器中的包   ...

  6. ubifs & mtd

    前天晚上在写完另一篇总结之时,赵XX向我咨询了关于mtd 和ubifs的相关内容.而我在这方面只是略懂皮毛,所以向他许愿共同调查这个方面的知识.经过昨天一天的调查,最后感觉是有了一定的经验和基础了,所 ...

  7. FIREDAC记录SQL日志

    FIREDAC记录SQL日志 跟踪SQL日志可以方便开发的时候的程序调试.SQL日志记录会耗费服务费资源,正式部署中间件的时候,建议关闭SQL日志记录. FIREDAC通过使用TFDMoniFlatF ...

  8. 设计模式之观察者模式(php实现)

    github地址:https://github.com/ZQCard/design_pattern /** * 当对象间存在一对多关系时,则使用观察者模式(Observer Pattern). * 比 ...

  9. win7/win10+vs2015+pcl1.8.0详细配置方案;

    参考网友的资料整理为更详细的解决方案 一.下载相关文件 1.下载PCL-1.8.0-AllInOne-msvc2015-win64.exe.属性表和PDB和测试pcd文件rabbit.pcd,其中,属 ...

  10. c:foreach如何输出序号

    关键在于<c:forEach>的varStatus属性,具体代码如下: <table width="500" border="0" cells ...