轉發: Angular裝飾器

来源:https://www.cnblogs.com/KevinMO/archive/2018/07/10/9286843.html
-Advertisement-
Play Games

Angular中的裝飾器是一個函數,它將元數據添加到類、類成員(屬性、方法)和函數參數。 用法:要想應用裝飾器,把它放在被裝飾對象的上面或左邊。 Angular使用自己的一套裝飾器來實現應用程式各部件之間的相互操作。 這個地方是前面幾個模塊(Modules), 指令(Diretives)、組件(Co ...


Angular中的裝飾器是一個函數,它將元數據添加到類、類成員(屬性、方法)和函數參數。

用法:要想應用裝飾器,把它放在被裝飾對象的上面或左邊。

Angular使用自己的一套裝飾器來實現應用程式各部件之間的相互操作。

這個地方是前面幾個模塊(Modules), 指令(Diretives)、組件(Components)、依賴註入(Dependency Injection)等從裝飾器這個側面的整理。

你需要做的:

1、搞清楚理解TypeScript的裝飾器原理。

2、搞清楚這裡面每一個裝飾器的作用,解決的什麼問題,應用場景。

類裝飾器:

Angular有很多裝飾器,它們負責把元數據附加到類上,以瞭解那些設計意圖以及它們應怎樣工作。

類裝飾器應用於類構造函數,可以用來監視,修改或替換類定義。

類裝飾器表達式會在運行時當作函數被調用,類的構造函數作為其唯一的參數。

@Component標記類作為組件並收集組件配置元數據(繼承Directive)

@Directive標記類作為指令並收集組件配置元數據

聲明當前類是一個它令,並提供關於該指令的元數據。

@Pipe 聲明當前類是一個管道,並且提供關於該管道的元數據

@Injectable標記元數據並可以使用Injector註放器註入

聲明當前類有一些依賴,當依賴註入器創建該類的實例時,這些依賴應該被註入到構造函數中。

@NgModule

NgModule是一個裝飾器函數,它接收一個用來描述模塊屬性的元數據對象。其中最重要的屬性是:

declaration-聲明本模塊中擁有的視圖類。(Angular有三種視圖類:組件、指令和管道)

exports-declaration的子集,可用於其它模塊的組件模板。PS:模塊導出聲明。

imports-本模塊聲明的組件模板需要的類所在的其它模塊。PS:模塊導入聲明

providers-服務的創建者,並加入到全局服務列表中,可用於應用任何部份。

bootstrap-指定應用的主視圖(稱為根組件),它是所有其它視圖的宿主。只有根模塊才能設置bootstrap屬性。

屬性裝飾器

屬性裝飾器表達式會在運行時當作函數被調用,

傳入下列2個參數:

對於靜態成員來說是類的構造函數,對於靜態成員來說是類的構造函數,對於實例成員是類的原型對象。

成員的名字。

 @Input 

聲明一個輸入屬性,以便我們可以通過屬性綁定更新它。

@Output

聲明一個輸出屬性,以便我們可以通過事件綁定進行訂閱。

@Hostbinding把宿主元素的屬性(比如CSS類)綁定到指令/組件的屬性

@HostListener

通過指令/組件的方法訂閱宿主元素的事件

@ContentChild配置一個內容查詢

@ViewChild配置一個視圖查詢

@ContentChildren配置多個內容查詢(返回QueryList類型)

@ViewChildren配置多個視圖查詢(返回QueryList類型)

參數裝飾器

參數裝飾器表達式會在運行時當作函數被調用,

傳入下列3個參數:

對於靜態成員來說是類的構造函數,對於實例成員是類的原型對象。

成員的名字。

參數在函數參數列表中的索引。

註意參數裝飾器只能用來監視一個方法的參數能否被傳入。

@Inject指定依賴關係的參數裝飾器(一般用來註入被標記Injectable的類)

@Optional將依賴項標記為可選的參數元數據,如果沒有找到依賴關係,註射器將提借null

@Self指定註射器只能從本身檢索依賴關係

@SkipSelf指定註射器只能從父類檢索依賴關係。

@Host按照依賴關係來檢索。

 

補充:關於NgModule裝飾器更全的說明,來自官方文檔

@NgModule 元數據

下麵是 @NgModule 元數據中屬性的彙總表:

屬性

說明

declarations

屬於該模塊的可聲明對象(組件、指令和管道)的列表。

  1. 當編譯模板時,你需要確定一組選擇器,它們將用於觸發相應的指令。

  2. 該模板在 NgModule 環境中編譯 —— 模板的組件是在該 NgModule 內部聲明的,它會使用如下規則來確定這組選擇器:

    • 列在 declarations 中的所有指令選擇器。

    • 從所導入的 NgModule 中導出的那些指令的選擇器。

組件、指令和管道只能屬於一個模塊。 如果嘗試把同一個類聲明在多個模塊中,編譯器就會報告一個錯誤。

Components, directives, and pipes must belong to exactly one module. The compiler emits an error if you try to declare the same class in more than one module.

不要重覆聲明從其它模塊中導入的類。

providers

依賴註入提供商的列表。

A list of dependency-injection providers.

Angular 會使用該模塊的註入器註冊這些提供商。 如果該模塊是啟動模塊,那就會使用根註入器。

當需要註入到任何組件、指令、管道或服務時,這些服務對於本註入器的子註入器都是可用的。

惰性載入模塊有自己的註入器,它通常是應用的根註入器的子註入器。

惰性載入的服務是局限於這個惰性載入模塊的註入器中的。 如果惰性載入模塊也提供了 UserService,那麼在這個模塊的上下文中創建的任何組件(比如在路由器導航時),都會獲得這個服務的本模塊內實例,而不是來自應用的根註入器的實例。

其它外部模塊中的組件也會使用它們自己的註入器提供的服務實例。

要深入瞭解關於多級註入器及其作用域,參見服務提供商

imports

要摺疊(Folded)進本模塊中的其它模塊。摺疊的意思是從被導入的模塊中導出的那些軟體資產同樣會被聲明在這裡。

特別是,這裡列出的模塊,其導出的組件、指令或管道,當在組件模板中被引用時,和本模塊自己聲明的那些是等價的。

組件模板可以引用其它組件、指令或管道,不管它們是在本模塊中聲明的,還是從導入的模塊中導出的。 比如,只有當該模塊導入了 Angular 的 CommonModule(也可能從BrowserModule中間接導入)時,組件才能使用NgIfNgFor` 指令。

你可以從 CommonModule 中導入很多標準指令,不過也有些常用的指令屬於其它模塊。 比如,你只有導入了 Angular 的 FormsModule 時才能使用 [(ngModel)]

exports

可供導入了自己的模塊使用的可聲明對象(組件、指令、管道類)的列表。

導出的可聲明對象就是本模塊的公共 API。 只有當其它模塊導入了本模塊,並且本模塊導出了 UserComponent 時,其它模塊中的組件才能使用本模塊中的 UserComponent

預設情況下這些可聲明對象都是私有的。 如果本模塊沒有導出 UserComponent,那麼就只有本模塊中的組件才能使用 UserComponent

導入某個模塊並不會自動重新導出被導入模塊的那些導入。 模塊 B 不會因為它導入了模塊 A,而模塊 A 導入了 CommonModule 而能夠使用 ngIf。 模塊 B 必須自己導入 CommonModule

一個模塊可以把另一個模塊加入自己的 exports 列表中,這時,另一個模塊的所有公共組件、指令和管道都會被導出。

重新導出可以讓模塊被顯式傳遞。 如果模塊 A 重新導出了 CommonModule,而模塊 B 導入了模塊 A,那麼模塊 B 就可以使用 ngIf 了 —— 即使它自己沒有導入 CommonModule

bootstrap

要自動啟動的組件列表。

通常,在這個列表中只有一個組件,也就是應用的根組件。

Angular 也可以引導多個引導組件,它們每一個都在宿主頁面中有自己的位置。

啟動組件會自動添加到 entryComponents 中。

entryComponents

那些可以動態載入進視圖的組件列表。

預設情況下,Angular 應用至少有一個入口組件,也就是根組件 AppComponent。 它用作進入該應用的入口點,也就是說你通過引導它來啟動本應用。

路由組件也是入口組件,因為你需要動態載入它們。 路由器創建它們,並把它們扔到 DOM 中的 <router-outlet> 附近。

雖然引導組件和路由組件都是入口組件,不過你不用自己把它們加到模塊的 entryComponents 列表中,因為它們會被隱式添加進去。

Angular 會自動把模塊的 bootstrap 中的組件和路由定義中的組件添加到 entryComponents列表。

而那些使用不易察覺的ViewComponentRef.createComponent()的方式進行命令式引導的組件仍然需要添加。

動態組件載入在除路由器之外的大多數應用中都不太常見。如果你需要動態載入組件,就必須自己把那些組件添加到 entryComponents 列表中。

要瞭解更多,參見入口組件一章。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 平時run dev都能正常顯示的css背景圖片在npm run build打包後竟然不顯示了(寫在標簽對中的圖片都可以正常顯示),而且dist/static/img目錄下是確實有這張圖片的,於是查看打包後的dist/static/css目錄下的css文件 發現打包生成的圖片路徑為background ...
  • 一, 一般最新版本的Node.js集悲劇了npm.在命令行下,輸入命令: "npm-v",可以測試npm是否安裝.如下圖所示: 二,上圖顯示了npm的版本號,即代表已經安裝了npm. 參考資料:《菜鳥教程》 ...
  • 一、什麼是Spring Spring是一個開源的控制反轉和麵向切麵(AOP)的容器框架。它的主要目的是使現有技術更加易用,推薦編碼最佳實現,從而簡化企業的開發。 提:使用Spring的好處有以下幾項: 1. 降低組件之間的耦合度,實現軟體各層之間的解耦合 2. Spring 對於主流的應用框架提供了 ...
  • 程式員萌萌在瀏覽關於分散式鎖的文章,突然下麵的話引起了萌萌的註意: 在鎖操作的客戶端打日誌 獲取鎖: T13:31:51.230redisname-lock:hsetnx E13:31:51.230GetConnection10.X.X.X T13:31:51.231redisname-lock:h ...
  • 題意翻譯 「Poetize3」 題目背景 隨著新版百度空間的上線,Blog寵物綠豆蛙完成了它的使命,去尋找它新的歸宿。 題目描述 給出一個有向無環圖,起點為1終點為N,每條邊都有一個長度,並且從起點出發能夠到達所有的點,所有的點也都能夠到達終點。綠豆蛙從起點出發,走向終點。 到達每一個頂點時,如果有 ...
  • 學習JAVA,必須首先安裝一下JDK(java development kit java開發工具包),之後再配置環境變數就可以開始使用JAVA了。 一,安裝JDK 1,可以選擇到官網下載最新版本的JDK,地址如下: http://www.oracle.com/technetwork/java/jav ...
  • __author__ = "yang xin"array=[]def quickSort(left,right): if left > right: return temp = array[left] i = left j = right while i < j: if array[j] >= te ...
  • 首先感謝老觀眾水中盜影和其它幾位的回覆,我媽還沒見到我娶媳婦就走了,也是我的不孝啊! 這一個月前半都在跑我媽的後事,後半都是強制996的加班中 天天坐火車回去當天再回來,雖然忙但還挺充實,也沒想什麼,公證處要什麼材料我就去各單位去開各種證明... 但是公證跑完了之後,後半個月的兩周我幾乎天天失眠,甚 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...