Angular开发(六)-关于组件之间的数据交互

在angular组件中数据交互主要有下面几种

• 一、父组件经过属性绑定到子组件，子组件经过事件传递参数到父组件
• 二、父组件经过局部变量获取子组件的引用
• 三、父组件使用@ViewChild获取子组件的引用
• 四、两个不相关联的组件使用中间人模式交互
• 五、终极大招:建立一个服务注入到组件中
• 六、直接把父组件当作服务注入到子组件中

1、经过输入与输出属性进行传递进行组件之间数据交互

//父组件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将要传递出去的参数传递给父组件，父组件中就能够获取到

2、使用局部变量获取子组件的引用

在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>

3、使用@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>

4、使用中间人模式

中间人模式就是第一种方式的改版，若是两个组件没有父子关系，那么久查找他们共同的父组件，咱们知道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>

5、终极大招:建立一个服务注入到组件中(Angular开发(十三)-服务的基本认识及利用服务实现组件间的通讯)

总结说明:angular项目有时候运行没效果，本身以为代码没错，那么请重启下服务

6、补充说明

在父组件传递数据到子组件中，子组件接受数据，能够对其接收的数据进行处理后再显示在页面中，这里就要用到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}}

7、直接将父组件当作服务注入到子组件中

//父组件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>