角度-为什么更改组件后变量中的数据丢失了？

如何解决角度-为什么更改组件后变量中的数据丢失了？

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

创建数组：

    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);
  }


}

根据逻辑，当我得到数组时，它应该随我放置的数据一起提供，但是它随默认的空数据一起提供。

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

解决方法

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

    @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));}}

,

创建一个服务以在两个组件之间共享数据。说您的服务显示如下

    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: '',}
      ];

    }