如何与另一个组件共享对组件 2d 数组的引用？

Question

我正在尝试在Angular中构建一个Life Game Applications。我有一个grid组件，用于显示生命游戏网格，每个单元格要么死要么活(它本身没有任何生命游戏逻辑，只显示可点击的单元格网格(。grid组件有一个 2d gameplane: bool[][]数组来表示生命游戏网格;每个单元格的信息都存储在该 2D 数组中。该grid component还具有用于确定网格尺寸的width: number和height: number属性。这两者中的每一个都有一个资源库，用于根据传递的值调整gameplane的大小。
现在我想以某种方式与另一个不相关的组件(control-panel("共享"这 3 个属性，这是通过服务完成的(但我无法弄清楚如何(。生命游戏逻辑不应位于grid组件中。

我现在的问题是，我需要能够读取和设置服务中的 3 个属性中的每一个，因为这是我计划放置逻辑的地方; 例如，我需要能够读取组件的 gameplane 属性以查看用户如何设置单元格的状态， 这发生在grid组件本身，我还需要写入 gameplane 属性，以根据生命游戏的规则设置下一个周期的每个单元格的状态。

我尝试使用 rxjs，并没有真正理解我在做什么，这并没有给我想要的结果。下面是一些代码：

grid.component.ts

// ... imports ...
@Component({
  selector: "app-grid",
  templateUrl: "./grid.component.html",
  styleUrls: ["./grid.component.scss"]
})
export class GridComponent implements OnInit {
  mousedown: boolean;
  gameplane: boolean[][];
  isMousedown: boolean = false;
  private _width: number;
  private _height: number;
// logic for click and mouseenter events...

grid.component.html(与问题无关(

<div>
  <table 
  (mousedown)="isMousedown = true"
  (mouseup)="isMousedown = false" 
  (mouseleave)="isMousedown = false"
  >
      <tr *ngFor="let row of gameplane; index as yCoord">
        <td *ngFor="let cell of row; index as xCoord; trackBy:trackByTd"
        (mousedown)="gameplane[yCoord][xCoord] = !gameplane[yCoord][xCoord]"
        (mouseenter)="invertCellOnMouseEnter(yCoord, xCoord)"
        class="cell"
        >
        </td>
      </tr>
  </table>
</div>

game-control.service.ts(我需要一些功能(

@Injectable({
  providedIn: 'root'
})
export class GameControlService {

  evolveInterval: 1000;
  isEvolving: boolean = false;
  fillGameplane(state: boolean) {
    // Fills each cell in the gameplane-array in grid.component with 'state' values.
  }
  randomizePlane() {
    // Randomly fills each cell in the gameplane-array in grid.component with either true or false.
  }
  evolvePlane(){
    // Reads the current value of the gameplane-array in grid.component and sets each cell's state
    // depending on the state of the cell's neighbours according to the rules of the Game of Life
  changeWidth(){
    // Changes the width-poperty in grid.component
  }

  constructor() {}
}

Answer 1

• 由于要在两个不相关的组件之间共享数据，因此应使用数据服务。本文非常详细地讨论了您应该如何执行此操作(视频 + 代码示例(https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

export class DataService {
  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();
  changeMessage(message: string) {
    this.messageSource.next(message)
  }
}
-------------------------------------------
@Component({
  selector: 'component1'
})
export class ParentComponent implements OnInit {
  constructor(private data: DataService) { }
  ngOnInit() {
    this.data.currentMessage.subscribe(data => console.log(data))
  }
}

-------------------------------------------
@Component({
  selector: 'component2'
})
export class SiblingComponent implements OnInit {
  constructor(private data: DataService) { }
  ngOnInit() {
    this.data.currentMessage.subscribe(data => console.log(data))
    this.data.changeMessage("Update the data")
  }
}

注意：如果要共享大量复杂数据，应考虑使用 redux 或 ngrx。这需要一些学习。https://medium.com/@cdeniz/getting-started-working-with-ngrx-and-firebase-85832ad85889