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

短命女 2022-06-06 06:57 149阅读 0赞

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

*  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() {
      }
    
    }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32

子组件中通过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>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17

### 三、使用`@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>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15

### 四、使用中间人模式 ###

中间人模式就是第一种方式的改版，如果两个组件没有父子关系，那么久查找他们共同的父组件，我们知道angular是有一个根组件组成的组件树，那么至少有根组件可以使用的。   
![项目文件结构][SouthEast]   
现在要实现从组件`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>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33

### 五、终极大招:创建一个服务注入到组件中([Angular开发(十三)-服务的基本认识及利用服务实现组件间的通信][Angular_-]) ###

> 总结说明:angular项目有时候运行没效果，自己觉得代码没错，那么请重启下服务

### 六、补充说明 ###

> 在父组件传递数据到子组件中，子组件接受数据，可以对其接收的数据进行处理后再显示在页面中，这里就要用到`set`与`get`方法

//父组件ts文件，传递一个parent给子组件
    data:string = "parent";
    //父组件html代码
    <app-comdemo01 [input]="data"></app-comdemo01>
     
      
       1
       2
       3
       4

//子组件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}}
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20

### 七、直接将父组件当做服务注入到子组件中 ###

//父组件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() {
      }
    
    }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21

//子组件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() {
      }
    
    }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17

//子组件html代码 <p>{ { father1.name}}</p> <ul> <li *ngFor="let item of father1.dataSet">{ { item.name}}</li> </ul>

[SouthEast]: /images/20220606/cf703e806b184c8ba770c181b777d63c.png
[Angular_-]: http://blog.csdn.net/kuangshp128/article/details/71518112