@angular
Contributes36
Followers0
Contributes
@angular
Stories ListAngular中懶加載一個模塊並動態創建顯示該模塊下聲明的組件
環境: Angular 13.x.x angular中支持可以通過路由來懶加載某些頁面模塊已達到減少首屏尺寸, 提高首屏加載速度的目的. 但是這種通過路由的方式有時候是無法滿足需求的. 比如, 點擊一個按鈕後顯示一行工具欄, 這個工具欄組件我不希望它默認打包進main.js, 而是用户點按鈕後動態把組件加載並顯示出來. 那為什麼要動態加載呢? 如果直接在目標頁面組件引入工具欄組件, 那麼工具
Nickname Laggage
Angular獨立組件簡單體驗
前言 Angular 14一項令人興奮的特性就是Angular的獨立組件終於來了。 在Angular 14中， 開發者可以嘗試使用獨立組件開發各種組件，但是值得注意的是Angular獨立組件的API仍然沒有穩定下，將來可能存在一些破壞性更新，所以不推薦在生產環境中使用。 如何創建一個獨立組件 對於已有的組件，我們可以在@Component()中添加standalone: true的標識，然後我們可
Nickname 大明二代
Angular SSR 探究
一般來説，普通的 Angular 應用是在 瀏覽器 中運行，在 DOM 中對頁面進行渲染，並與用户進行交互。而 Angular Universal 是在 服務端 進行渲染（Server-Side Rendering，SSR），生成靜態的應用程序網頁，然後在客户端展示，好處是可以更快地進行渲染，在提供完整的交互之前就可以為用户提供內容展示。 本文是在 Angular 14 環境中完成，有些內容對
Nickname Jmix
Angular--父子組件生命週期鈎子(lifecycle hooks)執行過程
1.angular 組件生命週期鈎子執行過程 組件初始化過程中，生命週期鈎子執行順序： constructor()構造函數,初始化class，(constructor不屬於Angular生命週期鈎子的範疇，這裏只是説明組件組件初始化會先調用構造函數)。 ngOnChanges()--如果組件沒有輸入屬性(@Input()),或者使用時沒有提供任何輸入屬性，那麼angular不會調用它；會調
Nickname 焱雨
Angular樣式隔離(style isolation)及選擇器(:host, :host-context, ::ng-deep)的使用
1.Angular樣式隔離 Angular樣式隔離的好處最最要的一條就是CSS的可維護性。當沒有樣式隔離時，我們創建一個組件並添加樣式後，可能會影響到其他的組件樣式，而且很有可能查找不出問題所在。雖然我們可以想出辦法來避免樣式被覆蓋，但是可能會引發CSS的可維護性問題。 Angular的視圖封裝(View Encapsulation) 在Angular中，組件的樣式可以封裝在組件的宿主元素中(ho
Nickname 焱雨
Ng-Matero v15 正式發佈
前言 Angular 按照既定的發版計劃在 11 月中旬發佈了 v15 版本。推遲了一個月（幾乎每個版本都是這個節奏😳），Ng-Matero 也終於更新到了 v15。其實 Ng-Matero 本身的更新非常簡單，但是同步維護的 Material Extensions 這個庫要先於 Ng-Matero 發佈，所以大部分精力都耗費在組件庫上面了。 我已經很久沒有寫關於 Ng-Matero 的發版文
Nickname 敍帝利
Angularjs——初識AngularJS
AngularJS——初識AngularJS AngularJS是什麼 AngularJS是Google開源的一款前端JS結構化框架，它通過對前端開發進行分層，極好地規範了前端開發的風格——它將前端開發分為Controller層、Service層、DAO層和Model層。其中，Model對象與HTML頁面（視圖）上HTML元素進行雙向綁定，開發者可通過Controller調用Service、DAO
Nickname 大雄的叮噹貓
Angularjs的重要概念
AngularJS的重要概念 MVC模式 AngularJS最早按照MVC模式設計，在這種設計模式下，AngularJS組件可以分為： M: Model，即模型，是應用程序中用於處理應用程序數據邏輯的部分，在AngularJS中: 即作用域對象(當前為$rootScope), 它可以包含一些屬性或方法； 充當儲存數據的容器； 提供操作數據的方法。 V: View
Nickname 大雄的叮噹貓
Angularjs的工程化
Angularjs的工程化 AMD規範和CMD規範 為什麼需要模塊化管理工具 在編寫項目時可能需要加載很多js文件，若b.js依賴a.js，且a.js比b.js大很多，那麼瀏覽器會讓b.js等待a.js加載完畢後再去執行b.js裏的內容；而即使d.js並不依賴a.js，b.js，c.js，也會等待這三個文件均加載完畢才執行，為了讓瀏覽器能夠按需加載，提出了模塊化管理工具。 script type=
Nickname 大雄的叮噹貓
GraphQL（三） - Authentication 和 Authorication
本文介紹GraphQL中的Authenication和Authorication 參考： https://graphql.org/learn/authorization/ https://www.apollographql.com/docs/apollo-server/security/authentication/ Authenication和Authorication的區別 Authe
Nickname Asp1rant
Angular: 樣式綁定
解決方案 使用ngClass和ngStyle可以進行樣式的綁定。 ngStyle的使用 ngStyle 根據組件中的變量， isTextColorRed和fontSize的值來動態設置元素的顏色和字體大小 div [ngStyle]="{'color': isTextColorRed ? 'red': 'blue','font-size': fontSize + 'px'}" This tex
Nickname 胸懷丶若谷
Angular 我在點擊了上一頁或者下一頁方法之後，重新加載渲染數據。為什麼還需要再點擊一次頁面的其他地方才會渲染出來？（或者數據改變了頁面沒有渲染）
在你的 TypeScript 代碼中，當調用 nextPage_TopSelling() 或 prevPage_TopSelling() 方法時，雖然你更新了 currentPage_TopSelling 的值並調用了 reloadTopSelling() 方法，但是 Angular 並不會自動檢測到這些變化並重新渲染頁面。這是因為 Angular 的變化檢測機制是基於異步的，在一些情況下需要手動
Nickname 峨嵋峯
Angular 集成 StreamSaver 大文件下載
應用場景: 實現目標: 在網頁端實現大文件(文件大小 = 2 G) 斷點續傳 實際方案: 發送多次請求, 每次請求一部分文件數據, 然後通過續寫將文件數據全部寫入. 難點: 無法實現文件續寫, 最後採用StreamSaver 來解決這個問題. 1. 首先從 git hub 將StreamSaver 拉取下來. StreamSavergitHub 項目地址:GitHub - jimmywartin
Nickname 書源
JS 實現 Angular slider 組件
需求描述 需求：根據傳入的動態數組生成一個節點數為數組長度的 slider 組件。要求節點直接長度一致，但是顯示的值為傳入數組的值。 示例： 傳入值為[5], 因為只有一個值，slider 無法拖動，顯示如下 傳入值為[5，10，20，30，40，50，55]， 數值之間差值不一定相等，顯示如下 實現邏輯： UI： 先畫一條線作為滑動條，再根據傳入數
Nickname Emon
關於 Angular 應用 Components 和 Directives 的實例化問題
同 Angular Module 不同，Angular Components 和 Directives 要實例化多次，每個出現在 HTML template 中的 markup 都會對應一次實例化。 此外，這些項的作用域也限定在它們被導入的 NgModule中，以防止兩個組件使用相同的選擇器時發生命名衝突。由於依賴注入(DI)行為的這種差異，需要區分一個包含組件和指令的 NgModule 和一個包
Nickname 註銷
rxjs 裏 Skip 操作符的一個使用場景
skip 操作符允許我們忽略源的前 x 個排放。 當我們有一個始終在 subscription 上發出希望忽略的某些值的可觀察對象時，就可以使用這個操作符。比如 Observable emit 的前幾個值並不是我們感興趣的值，另一種情況是我們訂閲了 Replay 或 BehaviorSubject，並且不需要對初始值進行操作，而只關心初始值之後的數據 emit. 這種情況下，skip 操作符非常有
Nickname 註銷
使用 RxJS timeout 操作符給 Angular SSR 服務器端渲染模式下的 HTTP 請求添加超時機制
Angular Universal 是一個開源項目，擴展了 @angular/platform-server 的功能。 該項目使 Angular 中的服務器端渲染成為可能。 為了在服務器上渲染，Angular 使用 node.js 的 DOM 實現——domino. 對於每個 GET 請求，domino 都會創建一個類似的 Browser Document 對象。 在該對象上下文中，Angular
Nickname 註銷
Rxjs TakeUntil 操作符的學習筆記
TakeUntil 的官方文檔對這個操作符的解釋是： Emit values until provided observable emits. 即它可以被賦予另一個起錨定作用的 Observable，當該錨定 Observable emit 值時，原始的 Observable 就停止發射值，進入 complete 操作。 看一個實際的例子： import { interval, timer } f
Nickname 註銷
Rxjs mergeMap 的使用場合
注意： flatMap 是 mergeMap 的別名。 如果一次只能激活一個內部訂閲，請使用 switchMap. 如果內部 observables 的發射和訂閲順序很重要，請使用 concatMap. 當需要展平內部 observable 但想要手動控制內部訂閲的數量時，是 mergeMap 極佳的使用場合。 例如，當使用 switchMap 時，每個內部訂閲在源發出時完成，即任意時間
Nickname 註銷
Rxjs map, mergeMap 和 switchMap 的區別和聯繫
map、mergeMap 和 switchMap 是 RxJS 中的三個主要運算符，在 SAP Spartacus 開發中有着廣泛的使用場景。 map map 是 Observables 中最常見的運算符。 它的作用與數組中的映射相對相似。 map 接收從 Observable 發出的每個值，對其執行操作並返回一個 Observable（因此 Observable 鏈可以繼續）。 把它想象成一個函
Nickname 註銷
rxjs Observable 設計原理背後的 Pull 和 Push 思路
Observables 顧名思義，是可以被觀察的事務。在 Rxjs 的上下文裏，Observable 會隨着時間的推移，在某個時間點產生數據。 Observables 可以： 不停地（永遠）產生值，比如 interval 操作符。 可以一次性生產價值，然後進入 complete 狀態。 可能會產生錯誤，然後進入 complete 狀態。 Observable 是一種異步事件的實現利器，例
Nickname 註銷
關於不同窗口，訂閲不生效的問題
問題 兩個窗口，顯示組件，A窗口顯示A組件，B窗口顯示B組件，兩個組件共同訂閲一個Service中的Subject，當在A組件中進行修改後，Service中的Subject發送通知，“值變更了”，B組件訂閲不到。 現在打開兩個窗口，每個窗口顯示一個組件，每個組件都訂閲 Service 中的 subjectTest， 在AComponent組件中,每隔一秒發送一條數據： AComponent 組件
Nickname zZ_jie
玩轉Angular系列：組件間各種通信方式詳解
前言 在前端框架Angular中，組件之間的通信很基礎也很重要，不同組件間的通信方式也不同，掌握組件間的通信方式會更加深刻的理解和使用Angular框架。 本文講解不同類型組件間的不同通信方式，文中所有示例均提供源碼，您可以 在線編輯預覽 或 下載本地調試，相信通過本文您一定可以掌握組件通信這一知識點。 父組件傳子組件 @Input方式 @Input()裝飾器允許父組件更新子組件中的數據，分為
Nickname echeverra