辰东完美世界有声小说,性爱有声小说在线收听,最好看的小说排行

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

創(chuàng)新互聯(lián)Angular教程：Angular語言服務(wù)

Angular 語言服務(wù)

Angular 語言服務(wù)為代碼編輯器提供了一種在 Angular 模板中獲取自動(dòng)補(bǔ)全、錯(cuò)誤、提示和導(dǎo)航的方法。它支持位于獨(dú)立 HTML 文件中的外部模板以及內(nèi)聯(lián)模板。

10年積累的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有銅陵免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

配置 Angular 語言服務(wù)的編譯器選項(xiàng)

要啟用最新的語言服務(wù)功能，請(qǐng)?jiān)?nbsp;?tsconfig.json? 中將 ?strictTemplates ?選項(xiàng)設(shè)置為 ?true?，如以下示例所示：

"angularCompilerOptions": {
  "strictTemplates": true
}

特性

編輯器會(huì)自動(dòng)檢測(cè)到你正在打開 Angular 文件。然后，它就會(huì)使用 Angular Language Service 讀取 ?tsconfig.json? 文件，查找應(yīng)用程序中具有的所有模板，然后為你打開的任何模板提供語言服務(wù)。

語言服務(wù)包括：

自動(dòng)補(bǔ)全清單
AOT 診斷消息
快捷信息
轉(zhuǎn)到定義

自動(dòng)補(bǔ)全

自動(dòng)補(bǔ)全可以在輸入時(shí)為你提供當(dāng)前情境下的候選內(nèi)容和提示，從而提高開發(fā)速度。下面這個(gè)例子展示了插值中的自動(dòng)補(bǔ)全功能。當(dāng)你進(jìn)行輸入的時(shí)候，就可以按 tab 鍵來自動(dòng)補(bǔ)全。

還有對(duì)元素的自動(dòng)補(bǔ)全。你定義的任何組件的選擇器都會(huì)顯示在自動(dòng)補(bǔ)全列表中。

錯(cuò)誤檢查

Angular 語言服務(wù)能對(duì)代碼中存在的錯(cuò)誤進(jìn)行預(yù)警。在這個(gè)例子中，Angular 不知道什么是 ?orders ?或者它來自哪里。

快捷信息與導(dǎo)航

快捷信息功能使你可以懸停以查看組件、指令、模塊等的來源。然后，你可以單擊“轉(zhuǎn)到定義”或按 F12 鍵直接轉(zhuǎn)到定義。

編輯器中的 Angular 語言服務(wù)

Angular 語言服務(wù)目前在Visual Studio Code和WebStorm、Sublime Text 和 Eclipse IDE 中都有可用的擴(kuò)展。

Visual Studio Code

在 Visual Studio Code 中，從 “擴(kuò)展程序：市場(chǎng) 中安裝擴(kuò)展程序。可以用左側(cè)菜單窗格中的擴(kuò)展程序圖標(biāo)從編輯器中打開市場(chǎng)，或使用 VS 快速打開（在 Mac 上為 ?+ P，在 Windows 上為 CTRL + P）并輸入“? ext”。在市場(chǎng)中，搜索 Angular Language Service 擴(kuò)展，并點(diǎn)擊 Install 按鈕。

Visual Studio Code 與 Angular 語言服務(wù)的集成工作是由 Angular 團(tuán)隊(duì)發(fā)布的。

Visual Studio

在 Visual Studio 中，從“擴(kuò)展程序：市場(chǎng)”中安裝擴(kuò)展程序?？梢詮木庉嬈髦写蜷_市場(chǎng)，在頂部菜單窗格中選擇“擴(kuò)展”，然后選擇“管理擴(kuò)展”。在市場(chǎng)上，搜索 Angular Language Service extension，然后單擊“安裝”按鈕。

Microsoft 在 Angular 團(tuán)隊(duì)的幫助下維護(hù)和發(fā)布了 Visual Studio 與 Angular 語言服務(wù)的集成。在這里查看項(xiàng)目。

WebStorm

在 WebStorm 中，啟用 Angular 與 AngularJS 插件。

從 WebStorm 2019.1 開始，?@angular/language-service? 已經(jīng)不再需要了，應(yīng)該從你的 ?package.json? 中移除。

Sublime Text

在 Sublime Text 中，當(dāng)安裝為插件時(shí)，語言服務(wù)僅支持內(nèi)聯(lián)模板。你需要自定義 Sublime 插件（或修改當(dāng)前插件），來實(shí)現(xiàn) HTML 文件中的自動(dòng)補(bǔ)齊。

要想在內(nèi)聯(lián)模板中使用語言服務(wù)，你必須首先添加一個(gè)擴(kuò)展，以支持 TypeScript，然后安裝 Angular 語言服務(wù)插件。從 TypeScript 2.3 開始，TypeScript 提供了一個(gè)插件模型，供語言服務(wù)使用。

把最新版本的 TypeScript 安裝到本地的 ?node_modules ?目錄下：

npm install --save-dev typescript

把 Angular 語言服務(wù)的包安裝到同一位置：

npm install --save-dev @angular/language-service

安裝好這個(gè)包后，將以下內(nèi)容添加到項(xiàng)目的 ?tsconfig.json? 的 ?"compilerOptions"? 部分。

"plugins": [
    {"name": "@angular/language-service"}
]

在編輯器的用戶首選項(xiàng)（?Cmd+,? 或 ?Ctrl+,?）中，添加以下內(nèi)容：

"typescript-tsdk": "/node_modules/typescript/lib"

這樣就能讓 Angular 語言服務(wù)提供 ?.ts? 文件中的診斷與自動(dòng)補(bǔ)全信息。

Eclipse IDE

你或者直接安裝包含了 Angular Language Server 的 “Eclipse IDE for Web and JavaScript developers” 軟件包，或者直接從其他 Eclipse IDE 軟件包中安裝，使用“Help” > “Eclipse Marketplace” 來查找并安裝 Eclipse Wild Web Developer。

語言服務(wù)的工作原理

當(dāng)你將編輯器與語言服務(wù)一起使用時(shí)，該編輯器將啟動(dòng)一個(gè)單獨(dú)的語言服務(wù)進(jìn)程，并使用語言服務(wù)協(xié)議通過 RPC 與之通信。當(dāng)你輸入編輯器時(shí)，編輯器會(huì)將信息發(fā)送到語言服務(wù)流程，以跟蹤你的項(xiàng)目狀態(tài)。

當(dāng)你觸發(fā)模板中的完成列表時(shí)，編輯器首先將模板解析為 HTML 抽象語法樹（AST）。Angular 編譯器解釋這棵樹以確定上下文：模板屬于哪個(gè)模塊，當(dāng)前作用域，組件選擇器以及光標(biāo)在模板 AST 中的位置。然后，它就可以確定可能位于該位置的符號(hào)。

如果你要進(jìn)行插值，則需要更多的精力。如果你在 ?div ?有 ?{{data.---}}? 的插值，并且在 ?data.---? 之后需要自動(dòng)補(bǔ)全列表，則編譯器無法使用 HTML AST 查找答案。HTML AST 只能告訴編譯器某些文本帶有字符 “?{{data.---}}?”。那時(shí)模板解析器會(huì)生成一個(gè)表達(dá)式 AST，該表達(dá)式位于模板 AST 中。然后，Angular 語言服務(wù)會(huì)在其上下文中查找 ?data.---?，詢問 TypeScript 語言服務(wù) ?data ?的成員是什么，并返回可能性列表。

當(dāng)前名稱：創(chuàng)新互聯(lián)Angular教程：Angular語言服務(wù)
標(biāo)題來源：http://m.fisionsoft.com.cn/article/dhdejep.html