用 Standalone Component 來寫 Angular 吧！ - STUDY4.TW 2023 小聚 - 聊前端

使用 Standalone Component
來寫 Angular 吧！
Mike Huang
多奇數位創意有限公司

About Me
● Title
○ 多奇數位創意有限公司
○ Angular GDE
○ Microsoft MVP
● Awards
○ 2018 iT 邦幫忙鐵人賽冠軍
○ 2019 iT 邦幫忙鐵人賽優選
○ 第 12 屆 iThome 鐵人賽冠軍
● 著作：打通 RxJS 任督二脈
https://github.com/wellwind
https://www.facebook.com/fullstackledder
https://fullstackladder.dev
https://www.tenlong.com.tw/products/9789864348039

先回憶一下使用
＠NgModule 的感覺

@NgModule({
declarations: [
AppComponent,
LayoutComponent
],
imports: [
BrowserModule,
AnotherModule,
TodoListModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }
@NgModule({
declarations: [
TodoListComponent,
TodoItemComponent,
TodoTextPipe,
TodoDoneDirective
],
imports: [
CommonModule
],
exports: [
TodoListComponent
]
})
export class TodoListModule { }

@Component({
selector: 'app-root',
template: '<app-todo-list></app-todo-list>'
})
export class AppComponent { }
如何找到 <app-todo-list></app-todo-list> 元件？

@Component({
template: '<app-todo-list></app-todo-list>'
})
@NgModule({
declarations: [
AppComponent,
LayoutComponent
],
imports: [
BrowserModule,
AnotherModule,
TodoListModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }
1
2
@NgModule({
declarations: [
TodoListComponent,
TodoItemComponent,
TodoTextPipe,
TodoDoneDirective
],
imports: [
CommonModule
],
exports: [
TodoListComponent
]
})
export class TodoListModule { }
3
4

用 Standalone Component 來寫 Angular 吧！ - STUDY4.TW 2023 小聚 - 聊前端

Angular Standalone
Components / Directives / Pipes

Standalone Components / Directives / Pipes
● Angular 14 推出 Developer Preview
● Angular 15 正式宣告 stable
● 在 @Component、@Directive、＠Pipe 加上 standalone: true 即可！
● Standalone 程式本身即可用 imports: [] 匯入
○ 其他的 @NgModule
○ 其他的 Standalone 程式
● 有 @NgModule 的概念，但又不用管 @NgModule
● 提供 CLI 工具快速轉換與產生程式
● 更加直覺、簡單的開發方式
● 打包速度更快、產出檔案更小

@Component({
standalone: true,
...
})
• 加上 standalone: true 就對了！
• 在 @Directive / @Pipe 上一樣適用

@Component({
standalone: true,
selector: 'app-todo-list',
imports: [
CommonModule
],
template: `
<ul *ngFor="...">
<li>...</li>
</ul>
`
})
export class TodoListComponent { }
@Component({
standalone: true,
...
})
準備一個 standalone component
ng generate component [name] --standalone
imports: [] 可加入其他 @NgModule

@Component({
standalone: true,
imports: [
NgIf
TodoListComponent
],
template: `
<app-todo-list>
</app-todo-list>
`
})
@Component({
standalone: true,
imports: [
CommonModule
],
template: `
<ul *ngFor="...">
<li>...</li>
</ul>
`
})
NgIf、NgFor 等 directives 現在也都是 standalone 了！

@Component({
standalone: true,
imports: [
TodoListComponent
],
template: `
<app-todo-list>
</app-todo-list>
`
})
@Component({
standalone: true,
imports: [
CommonModule
],
template: `
<ul *ngFor="...">
<li>...</li>
</ul>
`
})
standalone component 可以放入
另外一個 standalone component 的 imoprts: [] 中

@Component({
standalone: true,
imports: [
NgIf,
TodoListComponent
],
template: `
<app-todo-list *ngIf="...">
</app-todo-list>
`
})
1 抬頭就找到！

使用 Angular CLI 快速將專案轉換成 Standalone
重要：請將專案與 Angular CLI 都升級到 15.2.0 以上
ng generate @angular/core:standalone
• Convert all components, directives and pipes to standalone
• Remove unnecessary NgModule classes
• Bootstrap the application using standalone APIs
• 將所有 components, directives 和 pipes 轉換成 standalone
• 移除所有用不到的 NgModule 類別
• 使用 standalone APIs 啟動應用程式

更多重點都在文件裡
https://angular.io/guide/standalone-components

Resources
● 搶先體驗 Standalone Components / Directives / Pipes
● RFC: Standalone APIs
● Getting started with standalone components

用 Standalone Component 來寫 Angular 吧！ - STUDY4.TW 2023 小聚 - 聊前端

Recommended

More Related Content

What's hot (20)

Similar to 用 Standalone Component 來寫 Angular 吧！ - STUDY4.TW 2023 小聚 - 聊前端 (20)

More from 升煌黃 (14)