无法在方法中访问离子构造函数参数答案

【问题标题】：ionic constructor parameter cannot be accessed in method无法在方法中访问离子构造函数参数
【发布时间】：2020-07-09 11:01:05
【问题描述】：

我使用 navCtrl 从一个表格组件中推送数据，并使用 navParams 获取另一个组件中的数据，该组件用于计算表格中列号的总和。

第一个组件中的代码：(TableInputComponent)

    onTableCellUpdated(updatedTableCell: TableCell) {
        //this.logger.info(this.Label + 'onTableCellUpdated updatedTableCell:')
        //this.logger.info(updatedTableCell)
    
        // update gridRowJSON first - maintain data structure for displaying table
        this.gridRowJSON[updatedTableCell.indexOfGridRowJSON][updatedTableCell.Header] = updatedTableCell.Data1;
        //this.logger.info(this.Label + 'onTableCellUpdated this.gridRowJSON:')
        //this.logger.info(this.gridRowJSON)
        //this.logger.info(this.rows)
    
        // update here to trigger update for table-input-cell
        let updatingRow = this.rows[updatedTableCell.rowIndex]
        if (updatedTableCell.InputType === this.UI_TYPE_CHECKBOX) {
          updatingRow.filter(cell => cell.Header === updatedTableCell.Header)[0].Data1
            = updatedTableCell.Data1
          updatingRow.filter(cell => cell.Header === updatedTableCell.Header)[0].IsChecked
            = updatedTableCell.Data1 === updatedTableCell.InputAttribute.split('_')[0]
    
          // only uncheck other checkbox if selecting checkbox is checked
          // prevent coming to this function again when other checkbox is unchecked
          if (updatedTableCell.IsChecked && this.Data1) {
            updatingRow.filter(cell =>
              cell.Header !== updatedTableCell.Header
              && cell.InputType === 'CHECKBOX'
              && cell.InputWritable)
              .forEach(cell => {
                //this.logger.info(this.Label + 'onTableCellUpdated other CHECKBOX cell:')
                //this.logger.info(cell)
                cell.Data1 = ''
                cell.IsChecked = false
              });
          }
        }
      this.Data1 = this.getSubmitJSON() 

   this.emitUserInput(TableInputComponent, this.Data1);

}

第二个组件中的代码：(CalculatorInputTableComponent)

public tableData: any

  constructor(public navParams: NavParams) {
    this.tableData = this.navParams.get('tableData')
    this.logger.info("data1->",  this.tableData)
}

calculate() {
  this.logger.info("data2->",  this.tableData)
}

当我在表中输入数据时，第一个组件会将数据传递给第二个组件，所以我会看到记录器显示 data1 值，因为它已被传递到构造函数中。但是当我运行“calculate()”函数时，记录器会显示 data2 is “undefined”

似乎我无法从 calculate() 方法访问构造函数中的参数“tableData”。

谁能帮帮我？谢谢。

【问题讨论】：

你能告诉我你从哪里调用了calculate()函数吗？
表格和计算结果显示在同一个页面，我在计算结果旁边加了一个计算按钮来调用calculate()函数。
好的。您能否分享您的表格代码，以便我检查并帮助解决此问题？
我在我的帖子中更新了。但我认为我的问题只是当这两个组件在同一页面中时，如何将数据从一个组件传递到另一个组件。我使用了 navController 和 navParams，但它似乎用于在页面之间传递数据，而不是在一页内。另一个问题是如何从方法中访问构造函数中的变量。我只能在构造函数中使用 navParams 来获取数据，如果我在方法中编写 navParams 则无法获取数据。
通过组件传递数据最好通过服务来完成。查找角度服务，然后您可以在组件中初始化服务并调用数据。

标签： typescript ionic-framework parameters constructor

【解决方案1】：

一种将数据传递给多个对象的方法：

Angular service

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MessageService {
  messages: string[] = [];

  add(message: string) {
    this.messages.push(message);
  }

  clear() {
    this.messages = [];
  }
}

该示例只是 angular doc API 的副本。

在你的组件中这样调用你的服务：

constructor(private messageService: MessageService) { }

之后您应该能够调用您保存在服务中的方法/数据。

关于服务的快速提示，一旦您启动它们，它们就会保持活跃。与被破坏的组件不同。如果您想在组件重新打开时重置数据，您必须在代码中进行设置。

【讨论】：