我是 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>
3 回答
白板的微信
TA贡献1883条经验 获得超3个赞
在 CalculatorComponent 中，每次计算后调用此函数以设置计算结果：
setTotal(){
localStorage.setItem('total', this.result);
}现在触发新页面打开..
然后，转到新页面的ts文件，并从 localStorage 检索结果：
this.total = localStorage.getItem('total');现在在属于新页面的html文件中显示结果：
{{ total }}
qq_遁去的一_1
TA贡献1725条经验 获得超7个赞
使用角度路由将数据从一页显示到另一页 this.router.navigate(['your page name'], { state: value })
state: value 意味着你必须传递结果的值
噜噜哒
TA贡献1784条经验 获得超7个赞
正确的方法是创建一个服务组件，该组件将用于设置和读取数据（这是您的示例中所需的顺序，但可以是任何顺序）。请注意，您应该知道如何订阅此服务组件，因此我建议您之前阅读有关订阅者和可观察量的内容。
使用角度路线或本地存储不安全，所以我不会这样做。主要的原因是最终用户可以轻松修改它
- 3 回答
- 0 关注
- 53 浏览
添加回答
举报
0/150
提交
取消