angular2中input与output实战
来源:互联网 发布:2017网络机顶盒哪个好 编辑:程序博客网 时间:2024/06/05 13:35
前言
小编最近在解决input与output的问题,做了一个小栗子给大家展示一下
input
表示的是父组件与子组件之间的属性的关系,input是由父组件流向子组件的过程。为什么会由父组件流向子组件呢?因为子组件需要获得父组件的值,所以必须是父组件给组件。在做input的时候我们必须有这几个步骤
- 父组件中的html标签是否用了子组件的选择器
- 父组件中的属性叫什么名字(记住,因为在子组件要用)
- 父组件中的模块用子组件的compont。
- 孩子组件component中用@input与你父组件的时候名称一样
- 孩子组件中html中进行显示
- 程序运行首先是走父组件,然后根据选择器和compont找到子组件和子组件的选择器
代码显示
dataparent.component.html
<app-datagridchild [values]="data"</app-datagridchild>
dataparent.component.ts
//声明数组 data: Array<Object>; constructor() { this.data = [ { "id": 1, "name": "王" }, { "id": 2, "name": "雪" }, { "id": 3, "name": "芬" }, { "id": 4, "name": "ionic" }, { "id": 5, "name": "node" } ]
dataparent.module.ts
declarations: [ DataparentComponent, DatagridchildComponent, //引入孩子的组件,然后找到组件进行显示 ChildComponent ]
孩子:datagridchild.component.ts
@Input()//属性 values:Array<object>;
datagridchild.component.html
<ul> <li *ngFor="let item of values"> {{item.name}} </li></ul>
页面显示效果
Output
Output是子组件向父组件流向,为什么这么说呢?因为output针对的是事件,如果我们我们触发事件肯定时从子组件触发,然后父组件去执行,执行的过程其实与input是一样的,就是在触发事件的时候有点不一样
- 父组件中的html标签是否用了子组件的选择器
- 父组件中的click事件叫什么名字(记住,因为在子组件要用)
- 父组件中的模块用子组件的compont。
- 父组件的compont中写一个点击事件的方法(执行相应的内容)
- 孩子组件component中用@Output与你父组件的时候名称一样
- 引用import { Component, OnInit, Input, , Output, EventEmitter, ,} from ‘@angular/core’;
- 孩子组件component中用 @Output() childEvent=new EventEmitter();
- 孩子组件component中执行相应的事件
- 孩子组件中html中进行显示
- 程序运行首先是走父组件,然后根据选择器和compont找到子组件和子组件的选择器
代码显示
dataparent.component.html
<app-datagridchild [values]="data" (childEvent) = "getChildEvent($event)"></app-datagridchild>
dataparent.component.ts
//点击事件,获取孩子传过来的index getChildEvent(index){ console.log(index); //表示删除从1到index元素 this.data.splice(index,1); }
datagridchild.component.ts
@Output() childEvent=new EventEmitter<any>(); fireChildEvent(index){ //emit(按照参数的顺序执行每个监听器,如通有事件注册监听则返回true) this.childEvent.emit(index); }
datagridchild.component.html
<p *ngFor="let item of values; let i = index" (click)="fireChildEvent(i)"> {{item.name}}</p>
由于是动态图,所以没有办法显示给大家看
阅读全文
0 0
- angular2中input与output实战
- Angular2中Input和Output用法及示例
- Angular2 组件间通过@Input @Output通讯
- Input与Output
- Angular2的input和output(原先的properties和events)
- Angular2父子组件之间数据传递:@Input和@Output (上)
- Angular2父子组件之间数据传递:@Input和@Output (下)
- angular2 父子组件数据传递之@Input和@Output详解
- php://input与php://output
- input/output
- Java中Input和Output操作
- Java中Input和Output操作
- PHPExcel导出的问题,在PHP7中以及php://input与php://output
- Angular2 @Input 和 @Input 用法
- 文件下载中input.read()与output.write()相关问题,以及mp3下载的文件比原文件大的解决方法
- IO 详解 ,input与output 是以内存作为参考
- 彻底理解Java IO中input和output
- 重定向中input 和output相同的情况
- Longest Ordered Subsequence POJ
- 5分钟学会 CSS Grid 布局
- java代码连接oracle的DBUtil代码
- hadoop 集群系列 一:Linux 安装JDK
- ubuntu 系统添加开机自启动
- angular2中input与output实战
- 协调多个对象之间的交互——中介者模式(三)
- oracle事务
- IDEA 安装 mybatis-plugin并破解
- java IO流之文本内容的行逆序拷贝
- 队列结构
- 判断两个二叉树是否相似
- maven-shade-plugin踩坑记
- JDBC连接MySQL和SQL Server的工具类