• 父组建---->子组建 传递信息

  • 首先先通过angular脚手架生成两个基本组件,有一个好处是

    会自动关联到跟模版,节约时间,而且还是偷懒

  • ng generate component component-name 这句话有简写的方式,可以自己去搜

  • demo如下

    //father.component.ts
@Component({
selector: 'app-component-father',
template:`
<son [title]="'这是父组件定义的数据标题'"></son>
`,
})
export class ComponentFatherComponent {
}
//
import { Component, Input } from '@angular/core'; @Component({
selector: 'son',
template:`
<h1>{{ title }}</h1>
`,
styleUrls: ['./component-son.component.css']
})
export class ComponentSonComponent{
@Input() title: string;
}
  • 我们来看看,这倒底是神马一回事儿,第一次听到组件通讯

    顿时觉得高大上,理清思路之后,这简直弱爆了,就是属性绑定

  • 首先在子组建 需要引入输出接口 ---就是这个一个玩意,多了一个input,

    表示输入的意思,可以叫什么装饰器属性

    import { Component, Input } from '@angular/core';
  • 把这玩意塞到 你在类里面定义的属性前--像这样
    @Input() title: string;
  • 在模版里面使用插值表达式输出title---由于没有赋值,所以是没有结果的结果

    这时候这倒父组件发挥作用---请看下面
    @Component({
selector: 'app-component-father',
template:`
<son [title]="'这是父组件定义的数据标题'"></son>
`,
})
export class ComponentFatherComponent {
}
  • 干干净净的父组建什么东西都没有
    [title]="'这是父组件定义的数据标题'"
  • 就是东西 等号左边是 被绑定的属性 ,也就是子组建需要的东西的名字,

    等号右边就是你想输入的东西,你输什么鬼,页面就显示什么鬼

  • 饶了半天其实就是一个属性绑定的过程----说实话官网的那些文档只能看代码

  • 子组建----〉父组件 的有时间 再说

angular4.0 父子组建之间的相互通信的更多相关文章

  1. Vue父子组件之间的相互通信

    组件是Vue知识体系中最重要的一部分之一,父子组件由于作用域的不同,无法直接对对方的数据进行操作.它们之间的数据传递都是通过中间介质进行的,父组件给子组件传值是通过props属性,而子组件给父组件传值 ...

  2. Angular获取dom元素,以及父子组建之间相互传值

    1.使用原生js代码获取dom元素 在ts文件中有一个ngOnInit()的方法,这个方式是指在模块加载完毕之后并不是dom加载完毕,也就是说如果你的dom元素中使用的angular的指令,然后想在这 ...

  3. vue的父子组建之间的通信(-),基于props和$emit之间的传递

    对于vue而言,以为其核心思想为前端组建化.所以组建之间的通信必不可少. 相信接触过Angularjs的童鞋都知道angularjs的控制器之间的通信机制. 1:父传子:官方的$broadcast() ...

  4. VUE 自定义组件之间的相互通信

    一.自定义组件 1.全局自定义组件 我们在var vm = new Vue({});的上面并列写上Vue.component('自定义组件名',{组件对象});来完成全局自定义组件的声明.示例代码如下 ...

  5. Vue2.0父子组件之间和兄弟组件之间的数据交互

    熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...

  6. Vue2.0父子组件之间的双向数据绑定问题解决方案

    对于vue 1.0项目代码,如果把vue换成vue 2.0,那么之后项目代码就完全奔溃不能运行,vue 2.0在父子组件数据绑定的变化(不再支持双向绑定)颠覆了1.0的约定,很遗憾. 解决方案只有两种 ...

  7. vue2.0父子组件之间通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  8. vue2.0 父子组件之间的通信问题

    概要: 父组件向子组件通信:props属性 子组件向父组件通信:$emit()触发事件,$on()监听事件 在 vue 1.0 中可以使用$dispatch 和 $broadcast来实现 向上派发事 ...

  9. 【JavsScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

随机推荐

  1. 《Android进阶》之第三篇 深入理解android的消息处理机制

    Android 异步消息处理机制 让你深入理解 Looper.Handler.Message三者关系 android的消息处理机制(图+源码分析)——Looper,Handler,Message an ...

  2. .net后台获取DataTable数据,转换成json数组后传递到前台,通过jquery去操作json数据

    一,后台获取json数据 protected void Page_Load(object sender, EventArgs e){  DataTable dt = DBhepler.GetDataT ...

  3. 【Netty】Netty之Bootstrapping

    一.前言 前面已经学习了Netty的EventLoop以及线程模型,接着学习Netty的Bootstrapping. 二.Bootstrapping 在学习了Netty中的很多组件后,如何将这些组件有 ...

  4. 用scikit-learn学习LDA主题模型

    在LDA模型原理篇我们总结了LDA主题模型的原理,这里我们就从应用的角度来使用scikit-learn来学习LDA主题模型.除了scikit-learn,  还有spark MLlib和gensim库 ...

  5. glmnetUtils: quality of life enhancements for elastic net regression with glmnet

    The glmnetUtils package provides a collection of tools to streamline the process of fitting elastic ...

  6. 关于 IDEA 自动识别问题,jsp页面Controller路径自动识别的问题

    idea之所以强大,就是强大的代码提示和联想功能,写起代码来简直不要太爽.但是这几天我发现在我的jsp页面中访问controller路径的时候不会自动提示了,对于这么严谨的我肯定要找出原因啊,哈哈. ...

  7. java中File类中list()和listFiles()方法区别

    list()和listFiles()方法区别: 1.返回值类型不同:前者为String数组,后者为File对象数组 2.数组中元素内容不同:前者为string类型的[文件名](包含后缀名),后者为Fi ...

  8. MySql的学习笔记

    良好的理解sql语句: 列:理解可以运算的成变量 where: 理解成表达式,放在行中看是否成立 查出来的结果可以当成一张表理解,select 套用select综合查询:   五种查询 where g ...

  9. Python+requests库 POST接口图片上传

    捕获到POST接口的请求参数,如下: 包括data.file两个部分,上传代码如下: 比较简单,直接发送files参数即可 heads中 content-type 折腾了1个小时,呵呵

  10. 事件总线(Event Bus)知多少

    源码路径:Github-EventBus 简书同步链接 1. 引言 事件总线这个概念对你来说可能很陌生,但提到观察者(发布-订阅)模式,你也许就很熟悉.事件总线是对发布-订阅模式的一种实现.它是一种集 ...