angular2中input与output实战

前言

小编最近在解决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>

由于是动态图，所以没有办法显示给大家看