在Angular5中将对象从一个组件移动到同级组件

Posted 2023-02-23

【中文标题】在Angular5中将对象从一个组件移动到同级组件

【英文标题】：Move object from one component to a sibling component in Angular5

【发布时间】：2018-08-13 15:22:26

【问题描述】：

我正在开发一个列表应用程序，它将一个对象从一个组件传输到一个相同的兄弟组件。我还想在每次移动时将移动属性减少 1。我在将所选项目实际推送到同级数组时遇到问题。

这是我的数据样本...

import  player  from "./player";

export const PLAYERS: player[] = [
  
    index: 1,
    photo: "../../assets/images/lonzo.jpeg",
    name: "Lonzo Ball",
    position: "G",
    moves: 5
  ,
  
    index: 2,
    photo: "../../assets/images/***.jpeg",
    name: "*** Lopez",
    position: "C",
    moves: 5
  ,

这就是我在服务文件中的内容...

import  Injectable  from "@angular/core";
import  BehaviorSubject  from "rxjs/BehaviorSubject";
import  Subject  from 'rxjs/Subject';
import  player  from "./player";
import  PLAYERS  from "./players";
import 'rxjs/add/observable/of';
import  Observable  from "rxjs/Observable";
import  of  from "rxjs/observable/of";
import  bench  from './bench';
import  RESERVES  from './RESERVES';

@Injectable()
export class DataService 

  public players = <any>PLAYERS;
  public bench = <any>RESERVES;


public getPlayers(): Observable<player[]> 
    return Observable.of(this.players);
  

  public getReserves(): Observable<bench[]> 
    return Observable.of(this.bench);
  

  addToReserves(data) 
    this.bench.next(data);
  

  addToStarter(data) 
    this.players.next(data)
  

    constructor() 

这就是我在 starters.ts 文件中的内容...

import  Component, OnInit  from "@angular/core";
import  DataService  from '../data.service'
import  player  from "../player";

@Component(
  selector: "app-roster-box",
  templateUrl: "./roster-box.component.html",
  styleUrls: ["./roster-box.component.css"],

)
export class RosterBoxComponent implements OnInit 
  moves: number = 5;
  btnText: string = "Move to Bench";
  players: Array<any>


constructor(public dataService: DataService) 

getPlayers() : void 
    this.dataService.getPlayers()
      .subscribe(players => this.players = players);
  


ngOnInit() 

      this.getPlayers();


  
  moveToBench( data, i): void 
    this.dataService.addToReserves(data)

    // this.players.splice(i, 1);




  

最后是 bench.ts 文件的代码...

import  Component, OnInit  from '@angular/core';
import  DataService  from '../../app/data.service'
import  bench  from "../bench";

@Component(
  selector: 'app-roster-bench',
  templateUrl: './roster-bench.component.html',
  styleUrls: ['./roster-bench.component.css']
)
export class RosterBenchComponent implements OnInit 

  moves: number = 5;
  btnText: string = "Make Starter";
  reserves: Array<any>;

  constructor(private dataService: DataService)  

  getReserves() : void 
    this.dataService.getReserves()
      .subscribe(reserves => this.reserves = reserves);
  

ngOnInit() 

      this.getReserves();
      // this.moveData();
  

  makeStarter( data, i): void 
    this.dataService.addToStarter(data)

    // this.players.splice(i, 1);

我希望只需单击 html 中的按钮即可将选定的播放器移动到同级组件。我在如何构建服务/可观察等方面遇到了麻烦，因为这是我第一次使用 Angular。

【参考方案1】：

我有一点空闲时间......所以我把你的示例代码移到了这里的堆栈闪电战：https://stackblitz.com/edit/angular-j2l8pq

我不确定您到底想要完成什么，但尝试基本上回答您的问题。

一些关键的事情：

1) 我假设 bench 和 player 数组都需要是 Player 类型。这允许您在两个数组之间移动相同类型的项目而不会丢失任何属性。

2) 我将组件中的属性更改为 getter。这样它总是会从服务中获取当前值：

  get players(): Player[] 
    return this.dataService.players;
  
  get bench(): Player[] 
    return this.dataService.bench;
  

3) 您似乎不需要 Subject/BehaviorSubject，所以我删除了导入。

我不确定您指的是什么“同级组件”。但是，如果您创建另一个与同一服务通信的组件，如果它也有一个如上所示的 getter，它将与播放器组件共享相同的数据。

希望提供的代码为您回答问题提供基本方向。

组件

import  Component, OnInit  from "@angular/core";
import  DataService  from './player.service'
import  Player  from "./player";

@Component(
  selector: 'app-roster-box',
  template: 
    `<div>Current Roster</div>
    <li *ngFor="let player of players" (click)="moveToBench(player)">
       player.name 
    </li>
    <br>
    <div>Bench</div>
    <li *ngFor="let player of bench">
       player.name 
    </li>
    `
)
export class RosterBoxComponent implements OnInit 
  moves: number = 5;
  btnText: string = "Move to Bench";

  get players(): Player[] 
    return this.dataService.players;
  
  get bench(): Player[] 
    return this.dataService.bench;
  

  constructor(public dataService: DataService) 

  getPlayers() : void 
    this.dataService.getPlayers()
      .subscribe();
  

  ngOnInit() 
      this.getPlayers();
  

  moveToBench( player ): void 
    console.log(player);
    this.dataService.addToReserves(player)
  

服务

import  Injectable  from "@angular/core";
import  Player  from "./player";
import  Observable  from "rxjs/Observable";
import  of  from "rxjs/observable/of";

@Injectable()
export class DataService 

   players: Player[] = [];
   bench: Player[] = [];

    constructor() 

    getPlayers(): Observable<Player[]> 
    this.players = [
            
              index: 1,
              photo: "../../assets/images/lonzo.jpeg",
              name: "Lonzo Ball",
              position: "G",
              moves: 5
            ,
            
              index: 2,
              photo: "../../assets/images/***.jpeg",
              name: "*** Lopez",
              position: "C",
              moves: 5
            
          ]
      return of(this.players);
    

    getReserves(): Observable<Player[]> 
      return of(this.bench);
    

  addToReserves(player: Player) 
    this.bench.push(player);
    const index = this.players.indexOf(player);
    if (index > -1)
      this.players.splice(index, 1);
  

  addToStarter(data) 
    this.players.push(data)