Angular - 为什么在更改组件后，变量中的数据会丢失？答案

【问题标题】：Angular - Why after changing components, the data in the variables gets lost?Angular - 为什么在更改组件后，变量中的数据会丢失？
【发布时间】：2020-12-19 18:11:21
【问题描述】：

我有两个组件，一个创建和更改一个数组，另一个获取数组，问题是在第二个组件中获取数组时，该数组是默认的没有数据的：

数组创建：

    export class AddPlayerComponent implements OnInit {
    
      team = [
        {
          summonerName: '',
          rank: '',
          role: '',
        }
      ];

// 改变数组的代码 }

调用数组的另一个组件：

export class WaitingComponent implements OnInit {

  actualTeam;

  constructor(
   private addPlayerComponent: AddPlayerComponent
  ) { }

  ngOnInit(): void {
    console.log("add player team:", this.addPlayerComponent.team);
    this.actualTeam = this.addPlayerComponent.team;
    console.log("actual team:", this.actualTeam);
  }


}

按逻辑，当我得到数组时，它应该带有我放置的数据，但它带有默认的空数据。

如何获取包含两个组件之间数据的真实数组？

【问题讨论】：

你不应该像这样将值从组件传递到另一个组件。你应该创建一个服务。
父子两个组件之间是否有关系？
angular.io/guide/component-interaction

标签： arrays angular components

【解决方案1】：

创建服务以在两个组件之间共享数据。假设您的服务看起来像这样

    import { Injectable } from '@angular/core';
    import { BehaviorSubject } from 'rxjs';

    @Injectable({
     providedIn: 'root'
    })
    export class ShowService {    
     private data=new BehaviorSubject<any>();      
     public castTeam = this.data.asObservable();      
     showTeam(team){
      this.data.next(team);
     }
    }

然后在你的两个组件中导入这个服务，然后像这样在你的组件的 ngOnInit 中调用showTeam()

export class WaitingComponent implements OnInit {

  actualTeam;

  constructor( 
   private showdata: ShowService,
   private addPlayerComponent: AddPlayerComponent
  ) { }

  ngOnInit(): void {
    console.log("add player team:", this.addPlayerComponent.team);
    this.actualTeam = this.addPlayerComponent.team;
   
    this.showdata.castTeam.subscribe(actualTeam => { this.actualTeam= actualTeam; });
   console.log("actual team:", this.actualTeam);
  }
}

然后在另一个组件中导入相同的服务，然后在 ngOnInit 中订阅这样的服务方法

export class AddPlayerComponent implements OnInit {
      constructor( 
       private showdata: ShowService
      ) { }

      ngOnInit(): void {
       
        this.showdata.castTeam.subscribe(actualTeam => { this.team = actualTeam; });
      }
      team = [
        {
          summonerName: '',
          rank: '',
          role: '',
        }
      ];

    }

【讨论】：

【解决方案2】：

在这种情况下，您可能想尝试使用行为主题。您需要在服务中创建它，然后您可以将其注入到任意数量的组件中以便于访问。

    @Injectable() 
    export class TeamsService {
        private teams: ITeam[];
        private observableTeams: BehaviorSubject<ITeam[]>;  

    constructor() {
        this.teams = new Array<ITeam>;  
        this.observableTeams = <BehaviorSubject<ITeam[]>>new BehaviorSubject([]);}

    get teams() {
        return this.observableTeams.asObservable();}

    addTeam(team: ITeam) {
       this.teams.push(team);
       this.observableTeams.next(Object.assign({}, this.teams));}}

【讨论】：