首頁(yè) 猿問(wèn) 如何在 Angular...

如何在 Angular 的新視圖/頁(yè)面上顯示計(jì)算結(jié)果？

Html5

慕運(yùn)維8079593 2024-01-03 14:57:30

我是 Angular 的新手。我正在嘗試創(chuàng)建我的第一個(gè)簡(jiǎn)單的 Angular 計(jì)算器應(yīng)用程序，一切都很好。現(xiàn)在我想這樣做：當(dāng)我執(zhí)行計(jì)算時(shí)，該計(jì)算的結(jié)果將顯示在另一個(gè)視圖/頁(yè)面中。你能告訴我一些方法或關(guān)鍵字嗎？我的應(yīng)用程序：代碼：計(jì)算器.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貢獻(xiàn)1883條經(jīng)驗(yàn) 獲得超3個(gè)贊

在 CalculatorComponent 中，每次計(jì)算后調(diào)用此函數(shù)以設(shè)置計(jì)算結(jié)果：

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

現(xiàn)在觸發(fā)新頁(yè)面打開(kāi)..

然后，轉(zhuǎn)到新頁(yè)面的ts文件，并從 localStorage 檢索結(jié)果：

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

現(xiàn)在在屬于新頁(yè)面的html文件中顯示結(jié)果：

{{ total }}

反對(duì) 回復(fù) 2024-01-03

qq_遁去的一_1

TA貢獻(xiàn)1725條經(jīng)驗(yàn) 獲得超8個(gè)贊

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

state: value 意味著你必須傳遞結(jié)果的值

反對(duì) 回復(fù) 2024-01-03

嚕嚕噠

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個(gè)贊

正確的方法是創(chuàng)建一個(gè)服務(wù)組件，該組件將用于設(shè)置和讀取數(shù)據(jù)（這是您的示例中所需的順序，但可以是任何順序）。請(qǐng)注意，您應(yīng)該知道如何訂閱此服務(wù)組件，因此我建議您之前閱讀有關(guān)訂閱者和可觀察量的內(nèi)容。

使用角度路線或本地存儲(chǔ)不安全，所以我不會(huì)這樣做。主要的原因是最終用戶(hù)可以輕松修改它

反對(duì) 回復(fù) 2024-01-03