Question

我正在尝试在Angular中构建“生活游戏”应用程序。我有一个grid组件，用于显示死亡或存活的每个单元格的生命游戏网格（它本身没有任何生命游戏逻辑，只显示可单击的单元格网格）。 grid组件具有一个二维gameplane: bool[][]数组，用于表示“生命游戏”网格；每个单元的信息存储在该二维数组中。 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

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

1 个答案: