Angular 基礎教程（7.0）

阿新 • • 發佈：2018-11-26

課程亮點

按照初學者的學習路線規劃內容
所有程式碼均採用 Angular 7.0 版本
覆蓋日常開發中使用頻率最高的特性
To B、To C 型介面，移動端 PWA 全面覆蓋
附贈 3 個附錄，對比 5.0、6.0、7.0 版本

讀者反饋

《Angular 初學者快速上手教程》課程釋出已有一年，期間收到了很多讀者的留言，這裡摘錄幾條，僅供參考。為了不打攪這些朋友，部分採用了匿名。

enter image description here

課程背景

本課程是 Angular 基礎教程，目標是帶領讀者快速上手實戰。課程以 3 個核心概念作為主線（元件、路由和模組）以及在業務開發過程中必須用到的特性（工具、指令、表單、RxJS、i18n、測試）來展開講解。

除了這 3 個核心概念具有很強的關聯性外，其他內容都是完全獨立的，讀者在用到的時候可以隨時翻閱。注射器部分的內容稍微複雜一些，日常開發過程中用到的不多。

認真學完這門課程之後，將會深入理解新版本 Angular 的概念模型，具備使用 Angular 上手進行開發的基本能力。

作者介紹

大漠窮秋，10 年開發經驗，其中 5 年後端、5 年前端。熟悉 Java 相關的技術體系：Spring MVC、MyBatis、Ehcache、ELK、MySQL 等。在前端技術方面尤其有深入的研究，先後使用並研究過 Flex、jQuery、Ext JS、Backbone、Bootstrap、Angular 等常見的前端技術體系。

2016 ~ 2017 年期間，擔任 Angular Developer PM，專門幫助 Google Angular 團隊在中國推廣 Angular 框架。

出版了《Ext 江湖》一本圖書，翻譯出版了《ActionScript 3.0 遊戲設計基礎（第二版）》《用 AngularJS 開發下一代 Web 應用》《邁向 Angular 2》三本圖書。

更詳細的資料和演講照片，請點選這裡檢視
搭建並維護的專業 Angular 技術論壇，請點選這裡檢視

課程大綱

enter image description here

* 實際更新文章題目可能與框架略有出入

課程內容

開篇詞：為什麼會寫 Angular 這門課

有的讀者可能會問：Angular 相關的文章到處都有，我為什麼要來學習這門課？

這是一個非常好的問題，說明讀者對閱讀內容有質量要求。

如果是我，我也會有這樣的疑惑。

整體上說，這門課的內容有以下特色。

最近 5 年我一直在“玩”前端方面的東西，比如 jQuery、SVG、Ext JS、Adobe Flex、Angular；尤其在 2016 年，這一整年的時間我代表 Angular 專案組在中國進行技術推廣。因此，我會按照初學者一般的學習過程，用我自己的語言一步一步進行講解。

在這 5 年裡，我在超過 50 家企業、開源組織、大學裡面進行了大量演講，在網路上釋出了大量的視訊和文章。在到處奔波的過程中，認識了很多人，有經驗豐富的後端開發者、也有新入行的初學者，他們跟我說過很多自己的困惑，我會把常見的一些疑問融入在內容裡面。

我也會掃平日常開發中常見的坑，這些坑大部分都是開發者們反饋給我的，或者是到我這裡吐槽過的。舉幾個典型的例子：

很多開發者到我這裡來抱怨說，在 Windows 平臺上安裝 @angular/cli 會報很多 error，那是因為 @angular/cli 在 Windows 平臺上面依賴 Python 和 Visual Studio 環境，而很多開發者的機器上並沒有安裝這些東西。為什麼要依賴這些環境？因為某些 npm 包需要在你本地進行原始碼編譯。
node-sass 模組被牆的問題，強烈推薦使用 cnpm 進行安裝（點選這裡跳轉到安裝地址），可以非常有效地避免撞牆。
一些開發者來抱怨說 @angular/cli 在打包的時候加上 --prod 引數會報錯，無法編譯。這是一個很常見的問題，因為 @angular/cli 最新的版本經常會有 bug，只要在專案的 package.json 裡面降低一個小版本號就 OK 了。另外，加 --prod 引數之後，編譯器會進行更加嚴格的檢查，如果存在無用的元件或者配置錯誤，則編譯過不去。
@angular/cli 預設生成的 karma.conf.js 配置檔案裡面採用了一個有 bug 的 HTML 報告生成器，導致 ng test 執行報錯，我們需要把這個 reporter 改成 mocha（摩卡），具體的配置和例項請參考“第10課：自動化測試”中的講解。
還有的開發者說，本地開發的時候執行得很好，上線之後所有請求 404。這也是一個常見的坑，因為你需要給 Web 容器配置一下處理 HTTP 請求的規則，把前端路由扔回去交給 Angular 處理，可點選這裡檢視具體的情況。

諸如此類的坑還有不少，我都是一個一個踩過來的。當然，我相信讀者也能踩過來，但是從節約時間的角度來看，跟著我的思路走一遍豈不是更快？

這門課全部聚焦在使用層面上，覆蓋日常開發中使用頻率最高的特性，除非迫不得已，儘量不扯原理。長期以來，我發現有很多讀者的學習方式存在誤區，比如，有一些人上來就去研究“變更檢測”的原理，還有 RxJS 的原理，這種方式除了打擊你自己的自信心之外得不到任何好處。因為你遲早會發現，在計算機領域，任何東西研究到最底層都和“演算法”、“資料結構”、“設計模式”有關。

據我所知，很多讀者平時並沒有去研究這些內容的基礎知識，因此，我推薦採用更加務實一點的方案，首先學會如何使用，等用熟練了，有時間、有閒情的時候再去研究那些底層的原理。設計發動機很難，但是學會開車並不難，對吧？所以我寫這門課的目標很簡單，就是帶你學會開車，而不是教你設計發動機。

這門課非常看重“概念模型”（Mental Model）的構建。我發現，很多開發者已經做過非常多的專案了，但是當你跟他聊的時候，很快就會發現他並沒有掌握這門框架的精髓。打幾個比方：

當有人提到 Spring 的時候，你的大腦裡面第一個想到的一定是 DI、IoC、AOP 等這些核心概念；
當有人提到 Hibernate、MyBatis、JPA 的時候，你的大腦裡面立即會浮現出 ORM 等概念；
當有人提到 React 的時候，你想到的應該是 VDOM、JSX；
當有人提到 jQuery 的時候，你首先想到的應該是 $，對吧？

因此，可以看到，任何一個成功的框架都有自己獨創的“概念模型”，或者叫“核心價值”也可以，這是框架本身存在的價值，這些核心概念是掌握這個框架應該緊扣的主線，而不是上來就陷入到茫茫的技術細節裡面去。

課程裡面涉及到的例子總數量大約有 300 個，有少量例子來自官方文件（大約 5 個），其他的例子都是我自己一點一點手動敲出來的。我把這些例子分成了 10 個開源專案，它們互相獨立，方便讀者進行參考和練習。這些教學用的開源專案本身是免費的，已放在了本課的末尾。

Angular 的概念模型

既然如此，問題就來了，新版本的 Angular 的核心概念是什麼呢？

非常簡單，一切都是圍繞著“元件”（Component）的概念展開的。

86a9de10-e25f-11e8-aea1-e3c6bbbc3251

Component（元件）是整個框架的核心，也是終極目標。“元件化”的意義有 2 個：一是分治，因為有了元件之後，我們可以把各種邏輯封裝在元件內部，避免混在一起；二是複用，封裝成元件之後不僅可以在專案內部複用，而且還可以沉澱下來跨專案複用。
NgModule（模組）是組織業務程式碼的利器，按照自己的業務場景，把元件、服務、路由打包到模組裡面，形成一個個的積木塊，然後再用這些積木塊來搭建出高樓大廈。
Router（路由）的角色也非常重要，它有 3 個重要的作用：一是封裝瀏覽器的 History 操作；二是負責非同步模組的載入；三是管理元件的生命週期。

因此，在這門課程裡面，Component、NgModule、Router 加起來會佔據絕大部分的篇幅，而一些瑣碎的小特性會被忽略掉。我相信，讀者只要緊扣“元件化”這個主線，就能站在一個很高的角度去統攝全域性，從而掌握到這個框架的精髓。

適合閱讀的人群

本課程內容適合以下人群閱讀：

Angular 新版本的初學者
有 AngularJS 經驗的開發者
希望瞭解 Angular 新版本核心特性的開發者
Java 和 .NET 開發者，會發現 Angular 裡面的很多概念和做法非常適合已經掌握了那些概念模型的開發者，學起來會非常快

特別注意：這門課程不是前端入門讀物，讀者至少需要會一門程式語言，無論前端還是後端都可以，如果你曾經使用過一門前端框架，那就更好了。

集中回答一些常見的問題

瀏覽器相容性

關於 Angular 的瀏覽器相容性，請看下圖：

enter image description here

有一些國內的開發者會來爭論相容 IE 8 的問題，請看下面的兩個事實。

第一個事實：截至 2018 年 10 月底，Chrome 的全球市場份額已經接近 60.6%，Safari 佔 14.85%，Firefox 佔 5.01%，加起來已經佔到 80.46%，真的沒有那麼多人用 IE 了。

enter image description here

點選這裡檢視資料來源。

第二個事實：天貓已經於 2016 年 4 月宣佈放棄支援 IE 6、7、8 了。而根據百度流量研究院的統計，IE 8 目前的整體市場份額已經下降到了 9.31%。

enter image description here

點選這裡檢視資料來源。

讀者完全可以用上面的兩點事實去說服客戶，不值得為了這麼少的市場份額付出那麼多的研發和維護成本。

命名約定

老版本使用 AngularJS 指代，所有新版本都叫做 Angular。原因很好理解，因為老版本是用 JS 開發的，所以帶一個 JS 字尾，而新版本是基於 TypeScript 開發的，帶 JS 字尾不合適。

關於 TypeScript

這門課程不會單獨講 TypeScript，正如我一直強調的：TypeScript 不難，JavaScript 才難。你跟著我的思路，TypeScript 絕對不會成為你學習 Angular 的障礙。相反，一旦你寫程式碼熟練了之後，TypeScript 可以非常有效地提升編碼效率和程式可讀性。

關於 Angular 的版本

官方的版本釋出計劃是：

每 6 個月釋出一個主版本（第一位版本號，主版本）
每個主版本釋出 1 ~ 3 個小版本（第二位版本號，Feature 版本號）
每週釋出一個補丁版本（第三位版本號，Hotfix 版本號）

根據官方的解釋，Angular 2.0 之後會保證向下相容，只有在升級主版本的時候才會做一些 breaking change。因此，這門課程不再強調版本號，涉及到的所有例項程式碼都已經升級到了當前最新的 7.x 版本（2018-11）。

本課程劃分 3 大部分，共計 46 篇（含導讀）。

第一部分（第 01 課 ~ 第 10 課，共 32 篇）的內容將圍繞元件、模組、路由三大概念，兼顧服務、RxJS、表單、i18n 等小工具，全面解釋了 Angular 的基本用法。
第二部分（第 11 課，共 8 篇）的內容將專門解釋依賴注入，這是 Angular 比較有特色的內容，這部分的內容比較有深度，雖然在日常開發中使用不多，但是理解它能夠更加深入理解 Angular。
第三部分（第 12 課 ~ 附錄 3，共 5 篇）的內容將講解例項專案 OpenWMS、一些參考資源及三個附錄。

本課程對應的所有示例專案列表如下：

最後是那一句套話：水平有限，錯漏難免，歡迎指正。

第01課：搭建開發環境

本課的主要內容：

Node.js
Angular CLI
建立第一個專案
一些常見的坑
VS Code
webpack-bundle-analyzer

Node.js

2009 年，Node.js 釋出了第一個版本，標誌著前端開發正式告別了刀耕火種的原始狀態，開始進入工業化時代。

在 Node.js 出現之前，前端開發領域有很多事情我們是做不到的，比如：

JS 程式碼的合併、壓縮、混淆
CSS 預處理
前端自動化測試

而這一切在 Node.js 出現之後都得到了很好的解決。

對 JS 程式碼的預處理經歷了 Grunt、Gulp 的短暫輝煌之後，終於在 Webpack 這裡形成了事實標準的局面。
CSS 的預處理也從 Less 發展到了 Sass 等。
自動化測試一直是前端開發中的一個巨大痛點，由於前端在執行時嚴重依賴瀏覽器環境，導致我們一直無法像測試後端程式碼那樣可以去編寫測試用例。Node.js 出現之後，終於有了像 Karma + Jasmine 這樣的單元測試組合，也有了基於 WebDriverJS 這樣的可以和瀏覽器進行通訊的整合測試神器。

就前端開發目前整體的狀態來說，無論使用什麼框架，Node.js、Webpack、Sass、Karma + Jasmine、WebDriverJS 這個組合是無論如何繞不過去的。

Angular CLI

4b1f3900-e3c5-11e8-a1c4-731a3e37324c

在開發 Angular 應用的時候，當然也離不開大量基於 Node.js 的工具，我們需要 TypeScript Compiler、Webpack、Karma、Jasmine、Protracter 等模組。

有相關經驗的開發者都知道，自己從頭開始去搭建一套基於 Webpack 的開發環境是一件非常麻煩的事情，很多初學者在搭建環境這一步就消耗了過多的精力，導致學習熱情受到了沉重的打擊。

當團隊規模比較大的時候，在每個人的機器上配置環境需要消耗大量的時間。有一些團隊為了避開這個坑，利用 Docker 來做開發環境的同步和版本升級，看起來也是一個非常不錯的方案。

Angular 專案組從一開始就注意到了這個問題，所以有了 Angular CLI 這個神器，它的底層基於 Webpack，集成了以上提到的所有 Node.js 元件，你只要安裝好 Angular CLI 就夠了，不需要自己從頭一步一步安裝那些 Node.js 外掛。

當然，在安裝 Angular CLI 之前需要先把 Node.js 安裝好，請到官方網站（點選這裡跳轉到官方網站）下載安裝包，安裝過程和普通軟體沒有區別。安裝好 Node.js 之後就可以安裝 Angular CLI 了，由於 npm 會自動訪問海外的伺服器，因而強烈推薦使用 cnpm 進行安裝：

npm i -g cnpm --registry=https://registry.npm.taobao.orgcnpm i -g @angular/cli

cnpm 是淘寶釋出的一款工具，會自動把 npm 上面的所有包定時同步到國內的伺服器上來，cnpm 本身也是一款 Node.js 模組。

Angular CLI 安裝成功之後終端裡面將會多出一個名叫 ng 的命令，敲下 ng，將會顯示完整的幫助文件：

enter image description here

建立第一個專案

我們來建立第一個入門專案 HelloAngular，請在終端裡面執行如下命令：

ng new HelloAngular

@angular/cli 將會自動幫你把目錄結構建立好，並且會自動生成一些模板化的檔案，就像這樣：

a23847e0-e3c5-11e8-a1c4-731a3e37324c

請特別注意：@angular/cli 在自動生成好專案骨架之後，會立即自動使用 npm 來安裝所依賴的 Node 模組，因此這裡我們要用組合鍵 Ctrl + C 終止掉它，然後自己進入專案的根目錄，使用 cnpm 命令來進行安裝。

enter image description here

安裝完成之後，使用 ng serve 命令啟動專案：

enter image description here

開啟瀏覽器，訪問預設的 4200 埠，若看到以下介面就說明環境 OK 了：

cb88e910-e3c5-11e8-bfed-8d6b896efba7

請注意以下幾點：

這裡是 serve，不是 server，我看到一些初學者經常坑在這個地方。
如果需要修改埠號，可以用 ng serve --port **** 命令來進行指定。
ng serve --open 可以自動開啟預設的瀏覽器。
如果想讓編譯的包更小一些，可以使用 ng serve --prod，@angular/cli 會啟用 TreeShaking 特性，加了引數之後編譯的過程也會慢很多。因此，在正常的開發過程裡面請不要加 --prod 引數。
ng serve 是在記憶體裡面生成專案，如果你想看到專案編譯之後的產物，請執行 ng build。構建最終產品版本可以加引數，ng build --prod。

ng 提供了很多非常好用的工具，除了可以利用 ng new 命令來自動建立專案骨架之外，它還可以幫助我們建立 Angular 裡面所涉及到的很多模組，最常用的有以下幾個。

自動建立元件（ng generate component MyComponent，ng g c MyComponent），建立元件的時候也可以帶路徑，如 ng generate component mydir / MyComponent。
自動建立指令：ng g d MyDirective。
自動建立服務：ng g s MyService。
構建專案：ng build，如果想構建最終的產品版本，可以用 ng build --prod 命令。

更多的命令和引數請在終端裡面輸入 ng 命令仔細檢視，儘快熟悉這些工具可以非常顯著地提升編碼效率。

一些常見的坑

@angular/cli 這種“全家桶”式的設計帶來了很大的方便，同時也有一些讀者不太喜歡，因為很多底層的東西被遮蔽掉了，開發者不能天馬行空的自由發揮。比如，@angular/cli 把底層 Webpack 的配置檔案遮蔽掉了，很多喜歡自己手動配 Webpack 的開發者就會感到很不爽。

對於國內的開發者來說，上面這些其實不是最重要的，國內開發者碰到的坑主要是由以下兩點問題引起的：

網路問題，比如 node-sass 這個模組很有可能就裝不上，原因你懂的；
開發環境導致的問題，國內使用 Windows 平臺的開發者比例依然巨大，而 @angular/cli 在 Windows 平臺上有一些非常噁心的依賴，比如它需要依賴 Python 環境、Visual Studio 環境。

因此，如果你的開發平臺是 Windows，請特別注意以下幾點。

如果你知道如何給 npm 配置代理，也知道如何翻牆，請首選 npm 來安裝 Angular CLI。否則，請使用 cnpm 來安裝 Angular CLI，原因有三：
- cnpm 的快取伺服器在國內，裝東西的速度會快很多；
- 用 cnpm 可以幫你避開某些模組裝不上的問題，因為它在伺服器上面做了快取；
- cnpm 還把一些包都預編譯好了快取在服務端，比如 node-sass，使用 cnpm 不需要在本地進行原始碼編譯，因此你的機器上可以沒有那一大堆麻煩的環境。
如果安裝失敗，請手動把 node_modules 目錄刪掉重試一遍，全域性的 @angular/cli 也需要刪掉重灌，cnpm uninstall -g @angular/cli。
如果 node_modules 刪不掉，報出路徑過長等之類的錯誤，請嘗試用一些檔案粉碎機之類的工具強行刪除，這是 npm 的鍋，與 Angular 無關。
最新版本的 Angular CLI 經常會有 bug，尤其是在 Windows 平臺上面，請不要追新版本太緊，如果發現了莫名其妙的問題，請嘗試降低一個主版本試試。這一點非常重要，很多初學者會非常困惑，程式碼什麼都沒改，就升級了一下環境，然後會有各種編譯報錯。如果你願意，去官方（點選這裡跳轉到官網）提 issue 是個很不錯的辦法。
對於 MAC 使用者或者 *nix 使用者，請特別注意許可權問題，命令前面最好加上 sudo，保證有 root 許可權。
無論你用什麼開發環境，安裝的過程中請仔細看 log，很多讀者沒有看 log 的習慣，報錯的時候直接懵掉，根本不知道發生了什麼。

VS Code

053306a0-e3c6-11e8-8e04-b95633cc2286

如你所知，一直以來，前端開發領域並沒有一款特別好用的開發和除錯工具。

WebStorm 很強大，但是吃資源很嚴重。
Sublime Text 外掛很多，可惜要收費，而國內的企業還沒有養成花錢購買開發工具的習慣。
Chrome 的開發者工具很好用，但是要直接除錯 TypeScript 很麻煩。

因此，Visual Studio Code（VS Code）才會呈現出爆炸性增長的趨勢，它是微軟開發的一款前端編輯器，完全開源免費。VS Code 底層是 Electron，介面本身是用 TypeScript 開發的。對於 Angular 開發者來說，當然要強烈推薦 VS Code。最值得一提的是，從 1.14 開始，可以直接在 VS Code 裡面除錯 TypeScript 程式碼。

環境配置

確保 Chrome 安裝在預設位置
確保 VS Code 裡面安裝了 Debugger for Chrome 這個外掛
把 Angular CLI 安裝到全域性空間 npm install -g @angular/cli，國內使用者請使用 cnpm 進行安裝。注意，最好升級到最新版本的 Angular CLI，避免版本相容問題。
用 @angular/cli 建立新專案 ng new my-app ，本來就已經用 @angular/cli 建立的專案請忽略這一步，繼續往下走，因為只要是 CLI 建立的專案，後面的步驟都是有效的。
用 VS Code 開啟專案，進入專案根目錄。

配置 launch.json

17a9e4c0-e3c6-11e8-a1c4-731a3e37324c

請參照以上步驟開啟 launch.json 配置檔案。

enter image description here

請把本地 launch.json 檔案裡面的內容改成這樣：

{    "version": "0.2.0",    "configurations": [        {            "type": "chrome",            "request": "launch",            "name": "Chrome",            "url": "http://localhost:4200",            "webRoot": "${workspaceRoot}"        }    ]}

開始 Debug

在 app.component.ts 的建構函式裡面打個斷點，我本地是這樣打斷點的：

enter image description here

開啟終端，進入專案根目錄，執行 ng serve 啟動專案，然後從 VS Code 的 debug 介面啟動 Chrome：

3fe915f0-e3c6-11e8-a397-15a3bf78ee55

注意，可能需要 F5 重新整理一下 Chrome 才能進入斷點！

enter image description here

市場上有大量的 VSCode 外掛可供選擇，比如彩虹縮排、智慧提示、自動補齊標籤之類的功能，將會大幅度提升開發效率，這裡列出了 10 款我自己日常使用的外掛供你參考，點選這裡檢視詳情。

webpack-bundle-analyzer

在真實的業務專案中，我們會用到大量的第三方開源元件，如圖形庫 ECharts、元件庫 PrimeNG 等。

有很多開發者在引入這些元件庫之後，沒有注意到體積問題，導致最終編譯出來的包體積過大，比如我自己的 OpenWMS 專案，以下是 build 出來的體積：

enter image description here

用 webpack-bundle-analyzer 分析之後可以看到各個模組在編譯之後所佔的體積：

enter image description here

可以看到，主要是因為 ECharts 和 PrimeNG 佔的體積比較大，建議在使用的時候做一下非同步，用不到的元件不要一股腦全部匯入進來。

webpack-bundle-analyzer 的用法和詳細文件請點選這裡檢視。

小結

目前，無論使用什麼前端框架，都必然要使用到各種 Node.js 工具，Angular 也不例外。

與其他框架不同，Angular 從一開始走的就是“全家桶”式的設計思路，Angular CLI 這款工具裡面集成了日常開發需要使用的所有 Node 模組，使用 @angular/cli 可以大幅度降低搭建開發環境的難度。

第2-1課：元件概述

fb1852c0-e3d3-11e8-a1c4-731a3e37324c

幾乎所有前端框架都在玩“元件化”，而且最近都不約而同地選擇了“標籤化”這種思路，Angular 也不例外。

對於新版本的 Angular 來說，一切都是圍繞著“元件化”來展開的，元件是 Angular 的核心概念模型。

以下是一個最簡單的 Angular 元件定義。

09c6de40-e3d4-11e8-a397-15a3bf78ee55

@Component：這是一個 Decorator（裝飾器），其作用類似於 Java 裡面的 Annotation（註解）。Decorator 這個特性目前處於 Stage 2（草稿）狀態，還不是 ECMA 的正式規範，請點選這裡檢視具體詳情。
selector：元件的標籤名，外部使用者可以這樣來使用以上元件，<app-root>。預設情況下，ng 命令生成出來的元件都會帶上一個 app 字首，如果你不喜歡，可以在 angular-cli.json 裡面修改 prefix 配置項，設定為空字串將會不帶任何字首。
templateUrl：引用外部 HTML 模板。如果你想直接編寫內聯模板，可以使用 template，支援 ES 6 引入的“模板字串”寫法，請點選這裡檢視具體詳情。
styleUrls：引用外部 CSS 樣式檔案，這是一個數組，也就意味著可以引用多份 CSS 檔案。
export class AppComponent：這是 ES 6 裡面引入的模組和 class 定義方式。

完整的例項程式碼請點選這裡下載。

Angular 基礎教程（7.0）

課程亮點

讀者反饋

課程背景

作者介紹

課程大綱

* 實際更新文章題目可能與框架略有出入

課程內容

開篇詞：為什麼會寫 Angular 這門課

Angular 的概念模型

適合閱讀的人群

集中回答一些常見的問題

瀏覽器相容性

命名約定

關於 TypeScript

關於 Angular 的版本

第01課：搭建開發環境

Node.js

Angular CLI

建立第一個專案

一些常見的坑

VS Code

環境配置

配置 launch.json

開始 Debug

webpack-bundle-analyzer

小結

第2-1課：元件概述

相關推薦