iT邦幫忙

angular相關文章
共有 829 則文章
鐵人賽 JavaScript DAY 26
Signal API in Angular 系列 第 26

技術 Day 26 - 將 Decorators遷移到 input、queries 和 output 函數

input()、output()、viewChild()、viewChildren()、contentChild()、contentChildren()、out...

鐵人賽 JavaScript DAY 25
Signal API in Angular 系列 第 25

技術 Day 25 - 使用outputFromObservable函數將Observable轉換為OutputRef

與 outputToObservable 相反的是 outputFromObservable。 此實用程式函數將 Observable 轉換為 OutputrR...

鐵人賽 JavaScript DAY 23
Signal API in Angular 系列 第 23

技術 Day 23 - output 函數介紹

今天,我將介紹與 Output 裝飾器 (decorator) 相對應的 output 函數。 output 函數負責向父組件發送值。output 函數傳回一個...

鐵人賽 JavaScript DAY 22
Signal API in Angular 系列 第 22

技術 Day 22 - contentChildren 函數介紹

今天,我將介紹 contentChildren,它是 @ContentChild 裝飾器 (decorator) 的訊號對應部分。 ContentChildre...

鐵人賽 JavaScript DAY 21
Signal API in Angular 系列 第 21

技術 Day 21 - contentChild 函數介紹

Today, I will introduce contentChild that is the signal counterpart of @ContentC...

鐵人賽 JavaScript DAY 19
Signal API in Angular 系列 第 19

技術 Day 19 - viewChild函數的高階使用案例(二)- 將NgTemplate嵌入到ViewContainerRef中

viewChild 函數的另一個高階用例是將 NgTemplate 嵌入到 ViewConatinerRef 中。當範本非常簡單到擁有一個組件就顯得有些過分時,...

鐵人賽 JavaScript DAY 18
Signal API in Angular 系列 第 18

技術 Day 18 - viewChild 函數的高階使用者案例 1 - 以程式設計方式建立 Angular 組件

viewChild 函數的一個高階用例是在 ViewConatinerRef 中建立 Angular 組件。。當我們知道應用程式載入期間不需要 Angular...

鐵人賽 JavaScript DAY 17
Signal API in Angular 系列 第 17

技術 Day 17 - viewChild 函數簡介

從 Angular 17 開始,團隊開始將 decorators 遷移到 signals。第一個是 @Input decorator 和對應的 signal i...

鐵人賽 JavaScript DAY 16
Signal API in Angular 系列 第 16

技術 Day 16 - 組件與model input之間的溝通

在現代 Angular 中,組件中的雙向資料綁定 (two-way data binding),一般經驗法則是採用單向資料流 (unidirectional d...

鐵人賽 JavaScript DAY 15
Signal API in Angular 系列 第 15

技術 Day 15 - 在 Directive Composition API 中使用 Signal 和 Signal Input

第 14 天,我示範了host element可以將properties和attributes綁定到signal和signal input。signal inp...

鐵人賽 JavaScript DAY 14
Signal API in Angular 系列 第 14

技術 Day 14 - Use signal and signal inputs in a host element

In angular.dev official documentation, I found the following statement Always p...

鐵人賽 JavaScript DAY 13
Signal API in Angular 系列 第 13

技術 Day 13 - 將路由資料綁定到 Signal Input

在 Angular 16 中,withComponentInput 可以將路由資料綁定到Input decorator。相同的功能也適用於signal inpu...

鐵人賽 JavaScript DAY 12
Signal API in Angular 系列 第 12

技術 Day 12 - 介紹 Signal Input

Angular架構使開發人員能夠將資料從父組件傳遞到子組件。子組件由可在HTML範本中顯示或進一步處理以產生新的結果。 Angular在signal之前使用了@...

鐵人賽 JavaScript DAY 11
Signal API in Angular 系列 第 11

技術 Day 11 - explicitEffect - useEffect hook 的 Angular 版本

回顧第10天,effect追蹤signal並在任何signal值更新時運行effect函數。當signal不是effect的依賴項時,它會呼叫未追蹤的函數以防止...

鐵人賽 JavaScript DAY 10
Signal API in Angular 系列 第 10

技術 Day 10 - Signal API - 我們可以在Effect中做什麼?

在第3天和第4天,我簡要介紹了effect,例子是記錄各種signal的值。根據我的經驗,effect不僅僅是記錄signal的值。一些例子是, 向伺服器發出...

鐵人賽 JavaScript DAY 8
Signal API in Angular 系列 第 8

技術 Day 08 - 避免root-level service和 toSignal中的memory leak

第 5 天,我介紹了將Observable轉換為signal的toSignal函數。在我的範例中,我在組件中使用 toSignal`來避免root-level...

鐵人賽 JavaScript DAY 6
Signal API in Angular 系列 第 6

技術 Day 06 - RxJS 與 Signal 互通性 第 2 部分 - toObservable

昨天,我介紹了toSignal函數,它可以將可觀察序列(Observable)轉換成訊號 (Signal)。事實上,我們也可以使用 toObservable 函...

鐵人賽 JavaScript DAY 5
Signal API in Angular 系列 第 5

技術 Day 05 - Observable 與 Signal 的互通性 第 1 部分 - toSignal

本文至此已介紹了Signal的建立(create)、更新 (update)、擷取 (retrieve) 和衍生 (derivation)。如果我有一些舊的程式碼...

鐵人賽 JavaScript DAY 4
Signal API in Angular 系列 第 4

技術 Day 04 - Signal的技巧與陷阱

在第3天,我們介紹了Signal API、Computed Signal和Effect。今天,我們將介紹新用戶可能會遇到的Signal技巧和陷阱。 應用 equ...

鐵人賽 JavaScript DAY 3
Signal API in Angular 系列 第 3

技術 Day 03 - Angular 的 Signal API

Angular 16 中最重要的API就是 Signal API。一個Signal可以持有原始值或物件,當值更新時會通知範本和相依的 Signals。不同於有數...

鐵人賽 JavaScript DAY 1
Signal API in Angular 系列 第 1

技術 Day 01 - Angular:從基礎知識到 Signal API

什麼是 Angular? Angular 是一個開源JavaScript 框架,主要用於建立單頁企業應用程式(SPA),其中包含元件(可重複使用建構塊)、服務(...

鐵人賽 JavaScript DAY 7
Signal API in Angular 系列 第 7

技術 Day 07 - ngXtension中的 toObservableSignal - 天使與魔鬼的結合體

我們已經介紹了toSignal和toObservable,並了解了signals和Observables如何互通以實現所需的結果。 今天,我將介紹ngXtens...

技術 # 在 Angular 中調用 React 庫

在Angular中可以調用React庫,但是,需要手動插入,所有寫法全部是以React為主,Angular中只負責傳入數據,這樣寫的很麻煩也很不優雅 這樣不妨...

技術 我從 Angular 中分離出來依賴註入:`static-injector`

Angular 中的依賴註入確實非常好用,可以使服務之間的依賴關系變得更加靈活和可復用 但是只能在 Angular 中的使用限製了他的發揮,需要讓他在所有 n...

鐵人賽 Modern Web DAY 30

技術 Day 30:使用 Parchment 實現類似 Medium 的編輯器 - Videos & Tweets

今天來到了挑戰的最後一天,接著把剩下的 Videos 和 Tweets 等自訂 Blot 體驗一遍。 Videos 我們將以和 images 的實現方式來實現...

鐵人賽 Modern Web DAY 29

技術 Day 29:使用 Parchment 實現類似 Medium 的編輯器 - Dividers & Images

昨天體驗了基本的行內格式 Blot 以及區塊格式 Blot,今天繼續實現類似 Medium 編輯器的最後四個部分,分別為分隔線、圖片、影片、以及推文的自訂功能實...

鐵人賽 SideProject30 DAY 30

技術 Day 30 - 功能開發-15-程式打包與開發總結

程式打包 安裝執行結果 開發流程 環境建立 套件功能測試 系統功能需求定義 後端API開發 功能開發 登入功能 文章列表 文章編輯 使用者管理 地圖標記...

鐵人賽 SideProject30 DAY 29

技術 Day 29 - 功能開發-14-增加圖片紀錄功能

圖片上傳與圖片顯示UI設計 <div class="flex justify-content-start"> &...

鐵人賽 Modern Web DAY 28

技術 Day 28:使用 Parchment 實現類似 Medium 的編輯器 - Basic Formatting & myBlot

昨天我們新增了一個元件並初始化 Quill 的核心,今天繼續實現 Medium 編輯器的練習。 實作基礎格式 我們之前提到過,Inline 不貢獻任何格式。這是...

鐵人賽 Modern Web DAY 27

技術 Day 27:使用 Parchment 實現類似 Medium 的編輯器 - 準備工作

昨天透過 Parchement 新增了三種不同的 Attributor,今天來看要如何在編輯器上運用。官方文件介紹嘗試實現一個類似 Medium 的功能編輯器,...