Html 如何在新视图/组件上以角度传递和显示计算结果？_Html_Css_Angular_Typescript_Angular Template

Html 如何在新视图/组件上以角度传递和显示计算结果？

html css angular typescript

Html 如何在新视图/组件上以角度传递和显示计算结果？,html,css,angular,typescript,angular-template,Html,Css,Angular,Typescript,Angular Template,我创建了一个简单的计算器应用程序。我有两个组件：计算器和结果，并在它们之间使用角度路由器。现在我想这样做：当我在计算组件中执行计算时，结果将被传递并显示在另一个结果组件中。你能告诉我一些方法吗？计算器.component.ts @Component({ selector: 'app-calculator', templateUrl: './calculator.component.html', styleUrls: ['./calculator.component.css']

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

计算器.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>

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

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

最简单的方法是在从

calculator

route导航到

result

route时使用state

this.router.navigate（['result']，{state:{result}}）；

这将把您的结果放入

窗口.history.state

对象中，然后您可以从

result

组件访问该对象

ngOnInit（）{
this.resultValue=window.history.state.result；
}

2.您还可以将结果存储在共享服务中，然后从

result

组件访问该变量。在需要的地方注入服务，并存储从中检索的数据

@Injectable（）
导出类SharedServiceService{
storeValue:number=0；
构造函数（）{}
}

你不能为此使用共享服务吗？@Plochie是的，这是我的

数据.service.ts

。我没有任何操作。我添加了通过状态和服务传输数据的方法。查看演示。

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

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

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

  constructor() { }
}