如何在 Angular 的新视图/页面上显示计算结果？
我是 Angular 的新手。我正在尝试创建我的第一个简单的 Angular 计算器应用程序，一切都很好。现在我想这样做：当我执行计算时，该计算的结果将显示在另一个视图/页面中。你能告诉我一些方法或关键字吗？
我的应用程序：
代码：
计算器.component.html
<!DOCTYPE html>
<html>
<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>
<button class="butt" (click)='diff()'> - </button>
<button class="butt" (click)='mult()'> x </button>
<button class="butt" (click)='divi()'> / </button>
<br><br><br>
</div>
<div class="result">
<h3 class="">Result: {{result}}</h3>
</div>
</div>
</div>
</body>
</html>
慕运维80795933回答
-
白板的微信
在 CalculatorComponent 中，每次计算后调用此函数以设置计算结果：setTotal(){ localStorage.setItem('total', this.result); }现在触发新页面打开..然后，转到新页面的ts文件，并从 localStorage 检索结果：this.total = localStorage.getItem('total');现在在属于新页面的html文件中显示结果：{{ total }} -
qq_遁去的一_1
使用角度路由将数据从一页显示到另一页 this.router.navigate(['your page name'], { state: value })state: value 意味着你必须传递结果的值 -
噜噜哒
正确的方法是创建一个服务组件，该组件将用于设置和读取数据（这是您的示例中所需的顺序，但可以是任何顺序）。请注意，您应该知道如何订阅此服务组件，因此我建议您之前阅读有关订阅者和可观察量的内容。使用角度路线或本地存储不安全，所以我不会这样做。主要的原因是最终用户可以轻松修改它
随时随地看视频慕课网APP
相关分类
Html5