Angular开发(六)-关于组件之间的数据交互
2017-05-04 17:47
609 查看
在angular组件中数据交互主要有下面几种
1、父组件通过属性绑定到子组件,子组件通过事件传递参数到父组件
2、父组件通过局部变量获取子组件的引用
3、父组件使用@ViewChild获取子组件的引用
4、两个不相关联的组件使用中间人模式交互
5、终极大招:创建一个服务注入到组件中
6、直接把父组件当做服务注入到子组件中
子组件中通过emit将要传递出去的参数传递给父组件,父组件中就可以获取到
模板局部变量的定义是使用
三、使用
这种方法跟使用模板局部变量一样的,都是在父组件中调用子组件的方法
子组件跟上面方法一样的
现在要实现从组件
具体代码如下:
1、父组件通过属性绑定到子组件,子组件通过事件传递参数到父组件
2、父组件通过局部变量获取子组件的引用
3、父组件使用@ViewChild获取子组件的引用
4、两个不相关联的组件使用中间人模式交互
5、终极大招:创建一个服务注入到组件中
6、直接把父组件当做服务注入到子组件中
一、通过输入与输出属性进行传递进行组件之间数据交互
//父组件html <li *ngFor="let item of dataSet;let i = index"> <span>{{item.name}}</span>----{{i+1}}--{{item.id}} <app-child [names]="item" (foo)="bar($event)"></app-child> </li> //父组件ts文件 dataSet = [ {"id":0,"name":"张三"}, {"id":1,"name":"李四"}, {"id":2,"name":"王五"}, ] bar(event:any){ console.log(event); } //子组件html代码 <input type="button" value="{{names.name}}" (click)="todo($event)"/> //子组件ts文件 export class ChildComponent implements OnInit { @Input() names:any = {} //定义一个输出的 @Output() foo = new EventEmitter<string>() todo(event:any){ this.foo.emit('你好'); } constructor() { } ngOnInit() { } }
子组件中通过emit将要传递出去的参数传递给父组件,父组件中就可以获取到
二、使用局部变量获取子组件的引用
在angular中使用局部模板变量可以获取到子组件的实例引用模板局部变量的定义是使用
#name
//父组件html代码 <li *ngFor="let item of dataSet"> //使用模板局部变量调用子类的方法 <app-child [names] = "item" (click)="father.childFn()" #father></app-child> </li> //父组件的ts代码 dataSet = [ {"id":0,"name":"张三"}, {"id":1,"name":"李四"} ] //子组件的ts代码 @Input() names: any = {} childFn(){ console.log("我是子类的方法"); } //子组件的html代码 <span>{{names.name}}</span>
三、使用@ViewChild
获取子组件的引用
这种方法跟使用模板局部变量一样的,都是在父组件中调用子组件的方法子组件跟上面方法一样的
//父组件ts文件 dataSet = [ {"id":0,"name":"张三"}, {"id":1,"name":"李四"} ] //@ViewChild(子组件名称) 随便命名:子组件名称 @ViewChild(ChildComponent) child:ChildComponent; father(){ //调用子组件方法 this.child.childFn(); } //父组件html代码 <li *ngFor="let item of dataSet"> <app-child [names] = "item" (click)="father()"></app-child> </li>
四、使用中间人模式
中间人模式就是第一种方式的改版,如果两个组件没有父子关系,那么久查找他们共同的父组件,我们知道angular是有一个根组件组成的组件树,那么至少有根组件可以使用的。现在要实现从组件
com1点击按钮传递参数到组件
com2中
具体代码如下:
//com1组件html代码 <div class="com1"> <p>我是com1组件</p> <input type="button" value="com1按钮" (click)="com1Fn($event)" /> </div> //com1组件ts代码 //创建一个输出 @Output() outcom1Fn = new EventEmitter<string>(); com1Fn(){ this.outcom1Fn.emit("我是com1组件的"); } //根组件作为中间者模式代码 //中间者ts文件 private com1Tocom2; //根组件作为中间者 appFn(event:any){ console.log(event); this.com1Tocom2 = event; } //中间者html代码 <app-com1 (outcom1Fn)="appFn($event)"></app-com1> <app-com2 [com2]="com1Tocom2"></app-com2> //com2组件ts代码 @Input() com2:string = ""; //com2组件的html代码 <div class="com2"> <p>我是com2组件</p> <p>我是com1组件传递过来的:{{com2}}</p> </div>
五、终极大招:创建一个服务注入到组件中(Angular开发(十三)-服务的基本认识及利用服务实现组件间的通信)
总结说明:angular项目有时候运行没效果,自己觉得代码没错,那么请重启下服务六、补充说明
在父组件传递数据到子组件中,子组件接受数据,可以对其接收的数据进行处理后再显示在页面中,这里就要用到set与
get方法
//父组件ts文件,传递一个parent给子组件 data:string = "parent"; //父组件html代码 <app-comdemo01 [input]="data"></app-comdemo01>
//子组件ts文件 export class Comdemo01Component implements OnInit { _input: string; @Input() public set input(v: string) { this._input = v.toUpperCase();//转换大写输出 console.log(v); } public get input(): string { return this._input; } constructor() { } ngOnInit() { } } //子组件html代码 I am fron {{input}}
七、直接将父组件当做服务注入到子组件中
//父组件ts文件 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-father1', templateUrl: './father1.component.html', styleUrls: ['./father1.component.css'] }) export class Father1Component implements OnInit { constructor() { } public name:string = "我是父组件的名字"; public dataSet:Array<any> = [ {"id":"0","name":"张三"}, {"id":"1","name":"李四"}, {"id":"2","name":"王五"} ] ngOnInit() { } }
//子组件ts文件 import { Component, OnInit } from '@angular/core'; import {Father1Component} from "app/father1/father1.component"; @Component({ selector: 'app-child1', templateUrl: './child1.component.html', styleUrls: ['./child1.component.css'] }) export class Child1Component implements OnInit { constructor(private father1:Father1Component) { } ngOnInit() { } }
//子组件html代码 <p>{{father1.name}}</p> <ul> <li *ngFor="let item of father1.dataSet">{{item.name}}</li> </ul>
相关文章推荐
- Angular开发-关于组件之间的数据交互
- 【Android游戏开发之五】游戏注册界面Demo-实现两个Activity之间的切换与数据交互!
- 【Android游戏开发之六】在SurfaceView中添加组件!!!!并且相互交互数据!!!!
- 【Android 开发】: Android客户端与服务端之间使用JSON交互数据。
- 【COCOS2DX-LUA 脚本开发之十一】C/C++与Lua之间进行数据函数交互以及解决“PANIC: unprotected error in call to Lua API (attempt t
- 关于angular中controller和指令交互数据:@
- 【Android游戏开发之五】游戏注册界面Demo-实现两个Activity之间的切换与数据交互!
- 【Android游戏开发之五】游戏注册界面Demo-实现两个Activity之间的切换与数据交互!
- 【Android 开发】: Android客户端与服务端之间使用GSON交互数据。
- (转)【Android游戏开发之六】在SurfaceView中添加组件!!!!并且相互交互数据!!!!
- windows mobile开发循序渐进(5)移动应用程序与webservice之间的数据交互
- windows mobile开发循序渐进(4)移动应用程序与webservice之间的数据交互
- 【Android游戏开发之五】游戏注册界面Demo-实现两个Activity之间的切换与数据交互!
- Guava关于JAVA中系统组件之间交互通讯(非线程之间通讯)
- windows mobile开发循序渐进(5)移动应用程序与webservice之间的数据交互
- 【Android游戏开发之六】在SurfaceView中添加组件!!!!并且相互交互数据!!!!
- 【Android游戏开发之五】游戏注册界面Demo-实现两个Activity之间的切换与数据交互!
- Android游戏开发6:SurfaceView中添加组件并进行数据交互的方法
- 【Android游戏开发之五】游戏注册界面Demo-实现两个Activity之间的切换与数据交互!
- 【COCOS2DX-LUA 脚本开发之十一】C/C++与Lua之间进行数据函数交互以及解决“PANIC: unprotected error in call to Lua API (attempt t