亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 Angular 的新視圖/頁面上顯示計算結果?

如何在 Angular 的新視圖/頁面上顯示計算結果?

慕運維8079593 2024-01-03 14:57:30
我是 Angular 的新手。我正在嘗試創建我的第一個簡單的 Angular 計算器應用程序,一切都很好?,F在我想這樣做:當我執行計算時,該計算的結果將顯示在另一個視圖/頁面中。你能告訴我一些方法或關鍵字嗎?我的應用程序:代碼:計算器.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>
查看完整描述

3 回答

?
白板的微信

TA貢獻1883條經驗 獲得超3個贊

在 CalculatorComponent 中,每次計算后調用此函數以設置計算結果:

setTotal(){
  localStorage.setItem('total', this.result);
}

現在觸發新頁面打開..

然后,轉到新頁面的ts文件,并從 localStorage 檢索結果:

this.total = localStorage.getItem('total');

現在在屬于新頁面的html文件中顯示結果:

{{ total }}


查看完整回答
反對 回復 2024-01-03
?
qq_遁去的一_1

TA貢獻1725條經驗 獲得超8個贊

使用角度路由將數據從一頁顯示到另一頁 this.router.navigate(['your page name'], { state: value })

state: value 意味著你必須傳遞結果的值


查看完整回答
反對 回復 2024-01-03
?
嚕嚕噠

TA貢獻1784條經驗 獲得超7個贊

正確的方法是創建一個服務組件,該組件將用于設置和讀取數據(這是您的示例中所需的順序,但可以是任何順序)。請注意,您應該知道如何訂閱此服務組件,因此我建議您之前閱讀有關訂閱者和可觀察量的內容。

使用角度路線或本地存儲不安全,所以我不會這樣做。主要的原因是最終用戶可以輕松修改它


查看完整回答
反對 回復 2024-01-03
  • 3 回答
  • 0 關注
  • 190 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號