Как отобразить результат расчета на новом представлении / странице в Angular? - PullRequest
Новая
       21

Как отобразить результат расчета на новом представлении / странице в Angular?

0 голосов
/ 16 апреля 2020

Я новичок в Angular. Я пытаюсь создать свое первое простое приложение Angular калькулятор, все хорошо. Теперь я хочу сделать это: когда я выполняю вычисление, результат этого вычисления будет отображен в другом представлении / странице. Можете ли вы показать мне несколько способов или ключевых слов для этого?

Мое приложение : enter image description here

Код:

calculator.component. html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="card">
        <div class="card-header">CALCULATOR</div>
        <div class="card-body">
            <div class="form-group value">
                <div class="form-group row">
                    <label class="col-md-2 col-form-label">Value 1:</label>
                    <div class="col-md-10 input-1">
                        <input [(ngModel)]='number1' class="form-control inp" type="number" name="num1">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-2 col-form-label">Value 2:</label>
                    <div class="col-md-10 input-2">
                        <input [(ngModel)]='number2' class="form-control inp" type="number" name="num2">
                    </div>
                </div>
            </div>
            <div class="buttons">
                <br>
                <button class="butt" (click)='sum()'> + </button>&nbsp;&nbsp;&nbsp;
                <button class="butt" (click)='diff()'> - </button>&nbsp;&nbsp;&nbsp;
                <button class="butt" (click)='mult()'> x </button>&nbsp;&nbsp;&nbsp;
                <button class="butt" (click)='divi()'> / </button>
                <br><br><br>
            </div>
            <div class="result">
                <h3 class="">Result: {{result}}</h3>
            </div>
        </div>
    </div>
</body>

</html>

calculator.component.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {

  public number1: number;
  public number2: number;
  public result: number;

  constructor() {
  }

  sum() {
    this.result = this.number1 + this.number2;
  }

  diff() {
    this.result = this.number1 - this.number2;
  }

  mult() {
    this.result = this.number1 * this.number2;
  }

  divi() {
    this.result = this.number1 / this.number2;
  }

  ngOnInit(): void {
  }

}

Ответы [ 2 ]

1 голос
/ 16 апреля 2020

использование angular маршрутизация для отображения данных одной страницы на другой странице this.router.navigate (['your page name'], {state: value})

state: value означает, что вы должны передать ценность вашего результата

1 голос
/ 16 апреля 2020

В CalculatorComponent вызывайте эту функцию после каждого вычисления, чтобы установить результат вычисления: 

setTotal(){
  localStorage.setItem('total', this.result);
}

Теперь активируйте открытие новой страницы ..

Затем, go в файл ts новой страницы и извлеките результат из localStorage: 

this.total = localStorage.getItem('total');

Теперь в файле html, принадлежащем новой странице, отобразите результат: 

{{ total }}
...