如何在 Angular 中的新 view/component 上传递和显示计算结果？

Question

我创建了一个简单的计算器应用程序。我有两个组件：计算器和结果，并在它们之间使用 Angular 路由器。现在我想这样做：当我在计算组件中执行计算时，结果将被传递并显示在另一个结果组件中。你能告诉我一些方法吗？

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>

应用-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() { }
}

Answer 1

有多种方法可以做到这一点，

最简单的方法是在从 calculator 路线导航到 result 路线时使用状态。

this.router.navigate(['result'], { state: { result } });

这会将您的结果放入 window.history.state 对象，然后您可以从 result 组件访问该对象。

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

Demo

2. 您还可以将结果存储在共享服务中，然后从 result 组件访问该变量。在需要的地方注入服务并存储从中检索的数据。

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

如何在 Angular 中的新 view/component 上传递和显示计算结果？

How to pass and display Calculation result on a New view/component in Angular?

html

css

typescript

angular-template

angular