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

Question

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

Answer 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/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)
  }

}