如何在Angular中实现不同的视图?

时间:2019-01-28 09:35:25

标签: html angular typescript view

我正在尝试对区块链进行仿真。区块链由矿工网络组成。在我的示例中,我有10名矿工。这些矿工中的每个矿工都有一个候选区块,他们在其中输入交易池中的交易。事务来自网络,并放入事务池中。 示例:如果矿工1将交易A放入其候选区块,则交易A在矿工2-10的交易池中仍然可用。由于尚未进行交易,因此它仍然可用。如果开采者1的区块被开采,则应从每个交易池中删除交易A。

问题是,如何为每个节点实现不同的视图。如何在节点之间切换并保持事务池连接到每个节点?

我在项目中使用了网格布局。一个网格显示包含所有节点的网络。一个网格显示每个节点的块。一个网格显示全局事务,这些事务存储在池中。但是每个节点都应将交易存储在本地,这意味着如果节点1进行一项交易,则该交易仍应在节点2和其他交易中进行。

Miner-View.ts:

export class MinerViewComponent implements OnDestroy, OnInit {
          transaction: Transaction;
          displayedColumns: string[] = ['sender', 'recipient', 'amount', 'fee'];
          dataSource = new MatTableDataSource<Transaction>(ELEMENT_DATA);
          temp: Transaction[] = [];
          blockNumber = 1;
          previousHash = '00000000000000000000000000000000';
          blockHash: string = this.generateFirstHash();
          blockHashList: string[] = [];

      panelOpenState = false;

      message: any;
      subscription: Subscription;

      constructor(private ref: ChangeDetectorRef, private emitTransactionService: EmitTransactionService,
                  private messageService: MessageService) {
        this.subscription = this.messageService.getMessage().subscribe(message => {
          this.message = message;
          this.sendBlockToBC();
          this.clearBlock();
        });
      }

      ngOnDestroy() {
        this.subscription.unsubscribe();
      }

      ngOnInit() {
        this.emitTransactionService.row$.subscribe(transaction => {
            this.transaction = transaction;
            this.temp = this.dataSource.data.slice();
            this.temp.push(this.transaction);
            this.dataSource.data = this.temp;
            this.ref.detectChanges();
          }
        );
        this.temp = this.dataSource.data.slice();
        this.temp.pop();
        this.dataSource.data = this.temp;
        this.ref.detectChanges();
      }

      /** This method clears the current block of the miner (transactions only), when a new block has been added to the
       * blockchain. **/
      clearBlock() {
        this.ref.detectChanges();
        console.log('Transactions none.');
      }

      sendMessage(): void {
        this.messageService.sendMessage2('Message from miner view component to block-card component!');
      }

      /** This method puts the block from the active miner in the blockchain (when he got the proof-of-...). **/
      sendBlockToBC() {
        const block = new Block(this.blockNumber, this.temp, this.previousHash, this.blockHash);
        this.emitTransactionService.emitBlock(block);
        setTimeout(() => {
            console.log(block);
            this.temp = null;
            this.dataSource = undefined; // to empty the table in the miner view component
            this.dataSource = new MatTableDataSource<Transaction>(ELEMENT_DATA); // create new datasource to fill the table,
            // since the old one gives an error
            this.generateBlockHash();
            this.raiseBlockNumber();
            this.sendMessage();
          },
          100);

      }

Transaction-pool-component.ts:

export class TransactionPoolComponent implements OnInit {
          displayedColumns: string[] = ['select', 'sender', 'recipient', 'amount', 'fee'];
          dataSource = new MatTableDataSource<Transaction>(ELEMENT_DATA);
          selection = new SelectionModel<Transaction>(true, []);
          transaction: Transaction;
          temp: Transaction[];

      constructor(private ref: ChangeDetectorRef, private emitTransactionService: EmitTransactionService) {
      }

      /** This method gets the selected row as input. The selected row then gets deleted from the transaction
       * pool and appears in the block of the miner. **/
      putTXInBlock(row) {
        this.temp = this.dataSource.data.slice();
        for (let i = 0; i < this.temp.length; i++) {
          if (JSON.stringify(row) === JSON.stringify(this.temp[i]) ) {
            this.temp.splice(i, 1);
            break;
          }
        }
        this.dataSource.data = this.temp;
        this.ref.detectChanges();
        this.emitTransactionService.emitRow(row);
      }

      ngOnInit() {
          this.emitTransactionService.transaction$.subscribe(transaction => {
              this.transaction = transaction;
              this.temp = this.dataSource.data.slice();
              this.temp.push(this.transaction);
              this.dataSource.data = this.temp;
              this.ref.detectChanges();
            }
          );
          this.temp = this.dataSource.data.slice();
          this.temp.pop();
          this.dataSource.data = this.temp;
          this.ref.detectChanges();
      }
    } 

此刻,我刚刚为节点1实现了它。我认为我必须更改代码的整个概念,否则是否可以进行少量更改?我希望它适用于所有节点。

问题:目前,我不知道如何分别管理所有10个节点的数据源。因为每个节点都应具有其自己的数据源以及所有全局事务。另一件事是如何使所有10个节点进入接口。我的想法是实现一个< >按钮,我可以在1至10之间切换。但是最简单的方法是什么?使用每个节点的视图,我的意思是每个节点都有一个自己的事务池,所有全局事务都放入其中,然后每个节点都可以将这些事务放入自己的块中。但是这些事务不会被其他节点删除。我的问题与UX和数据模型有关。

如果您需要更多信息或不清楚的地方,请告诉我。然后,我将尝试改善问题。

具有10个节点的网络:

enter image description here

上方的块应显示来自该节点块的信息。下面的块应显示包含事务的池,在这种情况下,该池属于节点1。

enter image description here

0 个答案:

没有答案