angular4.0 父子组建之间的相互通信

父组建---->子组建传递信息
首先先通过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]="'这是父组件定义的数据标题'"

就是东西等号左边是被绑定的属性 ,也就是子组建需要的东西的名字，
等号右边就是你想输入的东西，你输什么鬼，页面就显示什么鬼
饶了半天其实就是一个属性绑定的过程----说实话官网的那些文档只能看代码
子组建----〉父组件的有时间再说

转载于:https://www.cnblogs.com/he-zhi/p/7129038.html

angular4.0 父子组建之间的相互通信相关推荐

计算机网络协议是网民们签订的合同,关于网络协议，下列__________选项是正确的。A.是网民们签订的合同B.是计算机之间的相互通信需...
关于网络协议,下列__________选项是正确的.A.是网民们签订的合同B.是计算机之间的相互通信需更多相关问题 Many think soccer has important advantage ...
vue的父子组建之间的通信(-)，基于props和$emit之间的传递
对于vue而言,以为其核心思想为前端组建化.所以组建之间的通信必不可少. 相信接触过Angularjs的童鞋都知道angularjs的控制器之间的通信机制. 1:父传子:官方的$broadcast() ...
VUE 2.0 父子组件之间的通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent><child :child-com="content"></child ...
【JavaScript】父子页面之间跨域通信的方法
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇"跨域,不再纠结&quo ...
Electron中通过ipcMain和ipcRender实现主进程和渲染进程之间的相互通信
场景用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/a ...
Fragment与Activity之间的相互通信
https://blog.csdn.net/u012702547/article/details/49786417 https://blog.csdn.net/carson_ho/article/de ...
【思科百难】RIP两个版本之间能够相互通信？
配置两台路由器,A&B.A-RIPv1, B-RIPv2 配置如下: A Loo0:1.1.1.1 32 g0/0/0 12.12.12.1 B Loo0:2.2.2.2 32 ...
Vue3组件开发-父子组件之间通信的方式
父子组件之间如何进行通信呢? 父组件传递给子组件:通过props属性: 子组件传递给父组件:通过$emit触发事件: 一.父组件传递给子组件在开发中很常见的就是父子组件之间通信,比如父组件有一些数据 ...
windows备份与还原和两个主机的相互通信
DAY02Windows 实验一: 实验名称:windows系统的备份与还原实验描述:为了保证系统的安全对系统做备份与还原操作系统实验拓扑: 实验步骤: 步骤一:将急救大师软件安装在虚拟机的系统上 ...
主机与虚拟机相互通信及虚拟机访问外网
相互通信指的是:主机(host)和虚拟主机(Vhost)能相互访问,宿主机及同一个局域网中的其他计算机能够访问到虚拟机,虚拟机也能访问到网络中的其它机器(当然包括宿主机).在我们接触的应用中,最常见的 ...

angular4.0 父子组建之间的相互通信

angular4.0 父子组建之间的相互通信相关推荐

最新文章

热门文章