Question

我正在做一个数字计算应用程序，我想将参数从一页传递到另一页，但是我只得到第一个值。我该怎么做才能在我的component2中显示其余值？

我从page2的数组中获取了第一个值，但无法获取控制台中出现的其他值。log

component1.ts：-

for (var i = 0; i < this.noQue; i++) { 
  var firstNum = Math.floor((Math.random() * divider));
  var secondNum = Math.floor((Math.random() * divider));

  if (this.operation == 1) {
    var answer = firstNum + secondNum;
  }
  else if (this.operation == 2) {
   var answer = firstNum - secondNum;
  }
  else if (this.operation == 3) {
    var answer = firstNum * secondNum;
  }

  this.answers.push(answer);
  this.answers1.push(answer);
  this.que.push({ firstNum, secondNum });
  this.ques.push({ firstNum, secondNum });
}

console.log('que---', this.que)
console.log('ans---', this.answers)

this.router.navigate(['/operation', { firstNum, secondNum, answer } ]);

Component2.ts：-

export class OperationComponent implements OnInit {
  f:[];
  fa:[]; 
  answer:[]; 
  que:[]
  constructor(private route: ActivatedRoute) { } 

  ngOnInit() {
    this.f = parseInt(this.route.snapshot.paramMap.get("firstNum"));
    this.fa = parseInt(this.route.snapshot.paramMap.get("secondNum")); 
    this.answer = parseInt(this.route.snapshot.paramMap.get("answer")); 
  }

component2.html：-

<div class="container"> 
  <h3 class="h2 text-center"> Grade </h3>
  <h3 class="h2 text-center"> Questions </h3> 
  <div class="card-block">
    <h4 class="card-title text-center"> {{f}} </h4> 
    <h4 class="card-title text-center"> +  {{fa}} </h4> 
    <p class="card-title h5 text-center"> _____</p> 
    <h4 class="card-title text-center"> {{answer}} </h4> 
    <button (click)="goBack()" [routerLink]="['']">go back</button>
  </div>
</div>

我希望输出作为我的应用程序中显示的所有值

Answer 1

一个可能的解决方案。

在component1.ts中：-尝试按以下方式调用导航：

change

更新＃1

this.router.navigate(['/operation', { firstNum: firstNum, secondNum: secondNum, answer: answer } ]);，firstNum，secondNum在for循环（在调用answer之前）中声明和初始化。

您到底要传递给Component2的是什么

更新＃2

仍然无法理解代码的目的，但请尝试以下操作。

component1.ts：-

this.router.navigate()

Component2.ts：-

var firstNum;
var secondNum;
var answer;

for (var i = 0; i < this.noQue; i++) { 
  firstNum = Math.floor((Math.random() * divider));
  secondNum = Math.floor((Math.random() * divider));

  if (this.operation == 1) {
    answer = firstNum + secondNum;
  }
  else if (this.operation == 2) {
   answer = firstNum - secondNum;
  }
  else if (this.operation == 3) {
    answer = firstNum * secondNum;
  }

  this.answers.push(answer);
  this.answers1.push(answer);
  this.que.push({ firstNum, secondNum });
  this.ques.push({ firstNum, secondNum });
}

console.log('que---', this.que)
console.log('ans---', this.answers)

this.router.navigate(['/operation', { firstNum: firstNum, secondNum: secondNum, answer: answer } ]);

Answer 2

您要将this.que.push({ firstNum, secondNum }); firstNum和secondNum推入同一数组中吗？

那么，为什么不将整个数组发送到下一页，以便可以按所需的方式在那里访问它。

当需要传递多个参数时，当前的操作方式将并可能导致将来陷入代码混乱和可能的锁定。

所以

this.router.navigate(['/operation', { que: this.que, answer: answer } ]);

这种方法将是有益的。

Answer 3

您可以通过两个步骤来实现相同目的：

步骤1： 从一页导航到另一页时发送查询参数。

this.router.navigate(['/operation'], {queryParams: {firstNum: firstNum, SecondNum: SecondNum, answer : answer }});

步骤2： 在另一个组件中，您可以通过ActivatedRoute模块获取查询参数的值。

this.firstNum= this._Activatedroute.snapshot.queryParams['firstNum']; 
this.SecondNum= this._Activatedroute.snapshot.queryParams['SecondNum']; 
this.answer = this._Activatedroute.snapshot.queryParams['answer'];

注意：要使用ActivatedRoute模块，您必须将其注入组件中。

 constructor( private _Activatedroute: ActivatedRoute)

如何从另一个页面接收参数

3 个答案: