猿问

如何在 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>&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>

            <div class="result">

                <h3 class="">Result: {{result}}</h3>

            </div>

        </div>

    </div>

</body>


</html>


慕运维8079593
浏览 117回答 3
3回答

白板的微信

在 CalculatorComponent 中，每次计算后调用此函数以设置计算结果：setTotal(){ &nbsp;&nbsp;localStorage.setItem('total',&nbsp;this.result); }现在触发新页面打开..然后，转到新页面的ts文件，并从 localStorage 检索结果：this.total&nbsp;=&nbsp;localStorage.getItem('total');现在在属于新页面的html文件中显示结果：{{&nbsp;total&nbsp;}}
0

qq_遁去的一_1

使用角度路由将数据从一页显示到另一页 this.router.navigate(['your page name'], { state: value })state: value 意味着你必须传递结果的值
0

噜噜哒

正确的方法是创建一个服务组件，该组件将用于设置和读取数据（这是您的示例中所需的顺序，但可以是任何顺序）。请注意，您应该知道如何订阅此服务组件，因此我建议您之前阅读有关订阅者和可观察量的内容。使用角度路线或本地存储不安全，所以我不会这样做。主要的原因是最终用户可以轻松修改它
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答