搜尋
首頁web前端js教程用Angular UI路由器在AngularJ中創建狀態模式

用Angular UI路由器在AngularJ中創建狀態模式

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌
Feb 20, 2025 am 11:45 AM

Creating Stateful Modals in AngularJS with Angular UI Router

用Angular UI路由器在AngularJ中創建狀態模式

有多種方法可以在AngularJS應用程序中實現模態，包括流行的Angular-Dialog服務和官方的Angular-UI Bootstrap模式。在本文中，我將分享我想使用另一項Angular-UI服務的Angular-ui-Router。

鑰匙要點

    模態可以被視為應用程序的獨特狀態，因此使用狀態管理工具在不同的模態狀態之間進行導航是合乎邏輯的。 >過渡到另一個狀態可以關閉狀態模式。 Angular UI路由器提供輸入和離開狀態時發射的Ententer和Onexit回調，可用於設置事件偵聽器以關閉模態。
  • 將模式視為提供諸如嵌套狀態，回調，狀態參數和依賴項注入以及URL路線之類的好處。它還允許在應用程序中的不同模態之間平穩導航。
    • 在狀態中進行思考
    • >這種方法背後的核心思想是模式實際上是您應用程序的獨特狀態。考慮一個電子商務網站。當您單擊“添加到購物車”按鈕時，一個模態會彈出，要求您登錄。您輸入詳細信息並單擊“繼續”，這顯示了您的另一種帶有購物車詳細信息的模式。
  • >
    • >您剛剛穿越了許多剛剛以模態的狀態。如果我們將模態視為狀態，那麼使用狀態管理工具往返於不同的模態狀態。
開始使用UI路由器

>

>讓我們保持簡單。首先，我們將安裝UI-Router並將其添加到Angular App。

1。創建一個簡單的html頁

我們將首先創建一個index.html文件，其中包含以下內容：>

> jQuery已包括以後的某些DOM工作。

> 除了包括最新版本的Angular本身之外，我還提供了Angular UI路由器，CSS文件（當前為空），當然還有我們的App的主JavaScript文件。接下來，讓我們看一下。

2。創建您的Angular App

此時，>
<span><span>
</span><span><span><span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><title>></title></span>Modals with Angular and Ui-Router<span><span></span>></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/jquery.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/app.js"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span>

3。啟用接口

>在我們打開模式之前，我們需要一個UI供用戶與用戶進行交互。在這種情況下 

angular<span>.module("modalApp", ["ui.router"])</span>
4。配置初始狀態

>我們將為每種模式定義多個狀態，但是首先需要進行一些設置。由於我們可能希望在不同的模態之間共享行為，因此讓我們創建一個父模態可以繼承的父態狀態。以下代碼屬於js/app.js：

<span><span>
</span><span><span><span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><title>></title></span>Modals with Angular and Ui-Router<span><span></span>></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/jquery.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/app.js"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><h3 id="gt">></h3></span>Pusheen Hoodie<span><span></span></span></span></span></span></span></span></span></span></span>

>

>

Now you too can look like Pusheen!> Add to cart> > >>我們定義了一個稱為“模態”的狀態。這是一個抽象狀態，意味著它不能直接過渡到。它僅是其子女國家的父母提供共同的功能。我們還為命名視圖（也稱為模態）定義了一個模板。命名您的觀點是一個好主意，避免將錯誤的狀態加載到應用程序中的錯誤位置，尤其是如果您在應用程序中使用UI-Router。

5。定義UI視圖指令，以使我們的模態加載到

>

> UI-Router使用稱為UI-View的指令來確定應加載狀態模板的位置。我們將在我們的index.html頁面上包含一個UI-View指令：

>由於我們將視圖命名為“模態”，因此我們也需要將其傳遞給指令。 AutoScroll =“ false”設置可防止UI-Router嘗試將模態滾動到視圖中。 

angular<span>.module("modalApp", ["ui.router"]).config(function($stateProvider) {
</span>  $stateProvider<span>.state("Modal", {
</span>    <span>views:{
</span>      <span>"modal": {
</span>        <span>templateUrl: "modal.html"
</span>      <span>}
</span>    <span>},
</span>    <span>abstract: true
</span>  <span>});
</span><span>});</span>
6。創建我們的第一個實際模態

>讓我們繼續定義我們的第一個實際模態。我們將創建一個彈出窗口，詢問用戶是否確定他們要將產品添加到購物車中。 >

那樣簡單。我們使用路由器的DOT表示法將新的CornexadDtocart狀態定義為模態的孩子。我們還為我們的新模式指定了一個模板。

>由於ConfirmAdDtocart模態是模態狀態的孩子，因此UI-Router將在模態狀態模板（Modal.html）中尋找UI-View指令，以渲染確認模板。接下來，讓我們創建這兩個模板。

> 
<span><span>
</span><span><span><span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><title>></title></span>Modals with Angular and Ui-Router<span><span></span>></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/jquery.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/app.js"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><h3 id="gt">></h3></span>Pusheen Hoodie<span><span></span>></span>
</span>    <span><span><span><p>></p></span>Now you too can look like Pusheen!<span><span></span>></span>
</span>    <span><span><span><button>></button></span>Add to cart<span><span></span>></span>
</span>
    <span><span><span><div> ui-view<span>="modal"</span> autoscroll<span>="false"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span></span></span>
7。創建基本模態的模板

模態狀態的模板負責創建透明的背景來覆蓋該應用程序，以及各種各樣的持有人，我們將加載不同的兒童狀態模板。

這是屬於CSS/app.css的幾種基本樣式：>

8。創建確認模態模板

此模板適用於帶有確認消息的實際模態框。以下代碼以模態/confirn.html： 
angular<span>.module("modalApp", ["ui.router"]).config(function($stateProvider) {
</span>  $stateProvider<span>.state("Modal", {
</span>    <span>views:{
</span>      <span>"modal": {
</span>        <span>templateUrl: "modal.html"
</span>      <span>}
</span>    <span>},
</span>    <span>abstract: true
</span>  <span>});
</span>
  $stateProvider<span>.state("Modal.confirmAddToCart", {
</span>    <span>views:{
</span>      <span>"modal": {
</span>        <span>templateUrl: "modals/confirm.html"
</span>      <span>}
</span>    <span>}
</span>  <span>});
</span><span>});</span>
模式框的

樣式：

<span><span>
</span><span><span><span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><title>></title></span>Modals with Angular and Ui-Router<span><span></span>></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/jquery.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/app.js"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span>

9。將其連接起來

>現在我們擁有一個帶有子狀態的父態狀態，並且它們的兩個模板實際上要做的就是觸發模態。 UI-Router為我們提供了一個名為UI-SREF的指令，其行為與錨標籤的HREF屬性相似。它從本質上將我們鏈接到我們提供的狀態名稱。 

angular<span>.module("modalApp", ["ui.router"])</span>

>現在，當我們單擊按鈕時，路由器將導航我們到modal.confirmaddtocart狀態。模態狀態的模板將首先加載到index.html中的UI-View指令中。這將顯示我們的背景並準備持有人。然後，“白色確認”對話框將加載到父模式模板中的UI-View指令中，嘿Presto！我們有模態！

10。關閉模態

您可能會注意到的第一件事是您無法關閉模式。讓我們解決這個問題。

我們設置的事件相當微不足道。我們只需要收聽ESC鍵，以及背景上的任何點擊即可。此外，已經添加了一個e.stoppropagation（）調用，以防止在模態內咔嗒聲到背景並無意中關閉模態。 >

繼續進行測試。 
<span><span>
</span><span><span><span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><title>></title></span>Modals with Angular and Ui-Router<span><span></span>></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/jquery.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/app.js"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><h3 id="gt">></h3></span>Pusheen Hoodie<span><span></span>></span>
</span>    <span><span><span><p>></p></span>Now you too can look like Pusheen!<span><span></span></span></span></span></span></span></span></span></span></span></span>

> Add to cart> > >

11。過渡到另一個模態

>現在我們可以打開和關閉模態，我們可以開始看到這種方法的真正強度。使每種模態以一個狀態表示，不僅乾淨有意義，而且使我們能夠在這些模態內穿越狀態。

>我們開始要求用戶確認他們的購買。現在，讓我們在另一種模式中向他們展示一個成功消息。同樣，我們將僅定義一個新狀態及其關聯的模板：

>

現在，剩下要做的就是將“是”按鈕從確認模式鏈接到新的成功狀態。當我們在那裡時，我們可以添加一個鏈接到我們默認狀態的“否”按鈕以關閉模式。 

angular<span>.module("modalApp", ["ui.router"]).config(function($stateProvider) {
</span>  $stateProvider<span>.state("Modal", {
</span>    <span>views:{
</span>      <span>"modal": {
</span>        <span>templateUrl: "modal.html"
</span>      <span>}
</span>    <span>},
</span>    <span>abstract: true
</span>  <span>});
</span><span>});</span>
>您有！基於狀態的，可導航的模式。我發現將模式視為狀態是確保用戶在應用程序中使用模式時具有平穩體驗的肯定方法。 
<span><span>
</span><span><span><span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><title>></title></span>Modals with Angular and Ui-Router<span><span></span>></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/jquery.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/app.js"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><h3 id="gt">></h3></span>Pusheen Hoodie<span><span></span>></span>
</span>    <span><span><span><p>></p></span>Now you too can look like Pusheen!<span><span></span>></span>
</span>    <span><span><span><button>></button></span>Add to cart<span><span></span>></span>
</span>
    <span><span><span><div> ui-view<span>="modal"</span> autoscroll<span>="false"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span></span></span>

由於模式只是狀態，因此您獲得了Angular UI路由器的所有其他添加好處，包括：

  • 嵌套狀態 - 您可以在模態內渲染其他狀態
  • >回調 - 當您的模態打開或關閉以告知其他部分時，請啟動事件
    • >
  • >狀態參數和依賴項注入 - 將數據傳遞給您的模式，以狀態參數或依賴項注入數據服務到州的控制器
  • URL - 狀態是URI可路由的，這意味著您可以擁有一個鏈接到模態，漂亮
    • 的URL

>本文中的所有代碼均可在GitHub上獲得。我很想听聽您對Angularjs中模態方法的反饋，所以請發表評論：）

經常詢問的問題（常見問題解答）關於使用AngularJ和Angular UI路由器創建狀態模式

>如何使用AngularJ和Angular UI路由器創建一個狀態模態？ >在AngularJS中使用狀態模式的好處是什麼？它們允許您維護應用程序的狀態，即使模態打開。這意味著您可以遠離模態並返回它而不會丟失任何數據。狀態模式還允許您使用瀏覽器的後式按鈕關閉模式，從而可以改善用戶體驗。

>

我如何使用$ state Service打開模式？ AngularJS中的國家服務使您可以在應用程序中的狀態之間過渡。要打開模式，您可以使用$ state.go方法，以代表您模態的狀態名稱傳遞。這將導致AngularJS加載與該狀態關聯的模板並將其顯示為模態。 AngularJS涉及在您的應用程序配置中使用$ stateProvider服務。您可以使用$ stateProvider.State方法定義一個新狀態，傳遞指定狀態名稱，URL和模板或模板圖的對象。模板或templateUrl應該指向模態的HTML內容。

>我可以使用Angular UI路由器來創建模式而不維護狀態嗎？

是的，您可以使用Angular UI路由器創建模式沒有維持狀態。但是，這意味著您失去了狀態模式的好處，例如能夠離開模態並返回它而不會丟失任何數據的能力。如果您不需要這些功能，則可以簡單地使用$ uibmodal服務來創建模式。 >

>如何關閉AngularJs中的狀態模式？

以關閉AngularJS中的狀態模式，您可以使用$ State Service過渡到另一個狀態。這將導致AngularJS卸載模式的模板並關閉模式。您還可以使用瀏覽器的返回按鈕來關閉模態，如果您配置了模態以實現狀態。

>

>我可以使用其他版本的Angular？具有其他版本的Angular的狀態模式。但是，創建狀態模式的過程可能會根據您使用的Angular的版本而有所不同。始終以最準確和最新的信息來參考官方角文檔。

>

>在Angularjs中創建狀態模式時，我如何處理錯誤？可以使用$ statechangeerror事件來處理錯誤。當狀態過渡期間發生錯誤時，該事件在根範圍內廣播。您可以在控制器中聆聽此事件，並在發生時採取適當的操作。

我可以將數據傳遞到Angularjs中的狀態模式嗎？在Angularjs中。在定義模態狀態時，可以使用參數選項完成此操作。參數選項允許您在打開模態時指定應傳遞給模態控制器的任何參數。

>

>如何測試AngularJS中的狀態模式？可以使用Angular的內置測試工具來完成AngularJ。您可以使用$狀態服務過渡到模式狀態，然後檢查模態模板是否正確加載。您還可以使用Angular的$ Controller服務來測試模式控制器中的任何功能。

>

以上是用Angular UI路由器在AngularJ中創建狀態模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
相關文章
從網站到應用程序：JavaScript的不同應用從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

刺客信條陰影：貝殼謎語解決方案
3 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前ByDDD
刺客信條陰影 - 如何找到鐵匠，解鎖武器和裝甲定制
1 個月前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
3 週前ByDDD
<🎜>：死鐵路 - 如何完成所有挑戰
3 週前ByDDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7638
15
CakePHP 教程
1391
52
steam的賬戶名稱是什麼格式
90
11
win11激活密鑰永久
71
19
NYT連接提示和答案
32
150
顯示更多