Angular, v18 到 v20 的新功能重點整理
接續 上一篇(v15 到 v17)，這篇將介紹 Angular v18 到 v20 中我整理的主要的新功能。 Angular v18Zoneless change detection 在之前 Angular 依賴 zone.js 來觸發變更偵測，但 zone.js 在開發體驗及效能方面有一些缺點。Angular v18 開始推出「zoneless」的實驗性 API，讓開發者可以不再依賴 zone.js。 在 zoneless 模式下，官方建議在元件中使用 signals 來管理狀態，變更偵測將依據 signal 的更新來觸發。 使用 zoneless 範例: 1234567// main.tsbootstrapApplication(App, { providers: [ provideExperimentalZonelessChangeDetection() ]}); 12345// angular.json"polyfills": [ "zone.js" // remove this line...
Angular, v15 到 v17 的新功能重點整理
記得幾年前我接觸 Angular 時，當時的版本還是 v15 。如今 Angular 已經進入 v20 版本了！這些版本中有許多新功能，讓我們來快速回顧一下重點更新，當然若須深入了解，官方文件有各功能更詳細的介紹可參考。 由於內容稍多，所以將分為上下篇；此篇為上篇，介紹 v15 到 v17 的主要新功能。 ( v18 到 v20 請見下一篇) Angular v15Standalone Components 正式版 告別 NgModule，可以直接宣告元件(Component)、指令(Directive)、管道(Pipe)。 12345678import { Component } from '@angular/core';@Component({ standalone: true, selector: 'app-hello', template: `<h1>Hello Standalone!</h1>`,})export class HelloComponent...
flex-auto 造成 overflow 可滾動元素跑版的解決方法
在使用 CSS 建立 flex 彈性佈局時，經常遇到一個情境：父容器大小固定的情況下，我們會讓其中某個子元素使用flex: auto來讓其填滿父容器的空間，並給這個子元素添加overflow: auto，讓該元素過長時能顯示 scrollbar 而不會超出容器範圍。 以上是父容器大小固定的情況下運作正常，但如果這個父容器其實也是另一個flex容器的子元素且被設為flex:auto，那麼結果界與預期不同了… 先來看簡單的情境，下面範例的黑框是flex容器，其中藍框元素高度固定，綠框元素高度也固定。而綠框元素本身也是flex容器，其中灰底子元素被設為flex: auto和overflow: auto。結果可以看到灰底元素的內容過長時，並不會綠框的範圍。 CodePen 現在我們想要綠框元素能填滿剩下的空間阿，於是我們調整一下，將籃框元素的高度改成flex: 0 0 40px，綠框元素的高度改成flex: auto。此時就能發現不對勁了，綠框元素竟然超出父容器的範圍了!? CodePen 其實解決方法也很簡單，只要將灰底子元素的 ‘flex...
Windows 啟動資料夾(Startup Folder)
當你每天開機時，是否希望某些程式能自動啟動，例如工作需要的文書工具、行事曆軟體或是聊天程式？其實常見的程式像是LINE、Discord等，本身就能設定開機自啟動，非常方便；但並不是所有程式都有該功能。而 Windows 的「啟動資料夾」就是一個非常方便的替代方案。透過這個資料夾，你可以輕鬆設定開機時自動執行的程式，讓日常工作更有效率。 在這篇文章中，我就來談談 Windows 中的啟動資料夾、如何找到它、以及如何新增或移除啟動程式。 什麼是啟動資料夾？啟動資料夾（Startup Folder）是一個特殊的資料夾，裡面的程式捷徑會在 Windows 開機時自動執行。Windows 其實有兩個啟動資料夾： 個人使用者的啟動資料夾：僅適用於目前登入的使用者。所有使用者共用的啟動資料夾：適用於所有帳號。 如何找到啟動資料夾？個人使用者的啟動資料夾 按下 Win + R 開啟執行視窗。 輸入以下指令： 1shell:startup 所有使用者共用的啟動資料夾 按下 Win + R 開啟執行視窗。 輸入以下指令： 1shell:common...
First post
這是首篇文章，作為未來發文參考用。 Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1hexo new "My New Post" More info: Writing Run server1hexo server More info: Server Generate static files1hexo generate More info: Generating Deploy to remote sites1hexo deploy More info: Deployment
