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

Posted 2021-04-08

我正在开发一个列表应用程序，它将一个对象从一个组件传输到一个相同的兄弟组件。我还希望每次移动时将移动属性减少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/Brook.jpeg",
    name: "Brook 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。

答案

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

我不确定你想要完成什么，但试图基本回答你的问题。

一些关键的事情：

1）我认为替补席和球员阵列都需要是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/Brook.jpeg",
              name: "Brook 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)
  }

}