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

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

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

Я создал простое приложение калькулятора. У меня есть два компонента: калькулятор и результат и использовать Angular маршрутизатор между ними. Теперь я хочу сделать это: когда я выполняю вычисления в компоненте «Расчет», результат будет передан и отображен в другом компоненте «Результат». Можете ли вы показать мне несколько способов для этого? enter image description here

enter image description here

calculator.component.ts 


@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 {

  }

}

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>
            {{result}}
        </div>
    </div>
</body>

</html>

app-routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CalculatorComponent } from './calculator/calculator.component';
import { ResultComponent } from './result/result.component';


const appRoutes: Routes = [
{ path: 'calculator', component: CalculatorComponent },
{ path: 'result', component: ResultComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes,
    { enableTracing: true } // <-- debugging purposes only
  )],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component. html

<h1>Angular Router</h1>
<nav>
    <a routerLink="/calculator" routerLinkActive="active">Calculator</a><br>
    <a routerLink="/result" routerLinkActive="active">Result</a>
</nav>
<router-outlet></router-outlet>

data.service.ts 

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

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor() { }
}

1 Ответ

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

Есть несколько способов сделать это,

  1. Самым простым способом может быть использование состояния при переходе к result маршруту от calculator маршрута. 
this.router.navigate(['result'], { state: { result } });

Это поместит ваш результат в window.history.state объект, к которому затем вы сможете получить доступ из result компонента. 

ngOnInit() {
    this.resultValue = window.history.state.result;
}

Демо


2. Вы также можете сохранить результат в общей службе и затем получить доступ к этой переменной из компонента result. Внедрите службу, где это необходимо, и сохраните извлеченные из нее данные. 

@Injectable()
export class SharedServiceService {
  storeValue: number = 0;
  constructor() { }
}
...