From 084ded3405e83a5513c3390d97b55d719213977b Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sat, 5 Nov 2022 15:28:03 +0800 Subject: [PATCH 01/20] =?UTF-8?q?@HostListener=20=E8=A3=9D=E9=A3=BE?= =?UTF-8?q?=E5=99=A8=20=E5=8F=AF=E4=BB=A5=E7=94=A8=E4=BE=86listen=20mouseo?= =?UTF-8?q?ver=E8=B7=9Fmouseout=E4=BA=8B=E4=BB=B6=20=E6=94=B9=E8=AE=8A?= =?UTF-8?q?=E9=A1=8F=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.html | 8 +++---- src/app/app.component.spec.ts | 35 ----------------------------- src/app/app.component.ts | 19 +--------------- src/app/app.module.ts | 4 ++-- src/app/over-highlight.directive.ts | 21 +++++++++++++++++ src/app/task.ts | 9 -------- src/app/task/task.component.css | 14 ------------ src/app/task/task.component.html | 2 -- src/app/task/task.component.ts | 12 ---------- 9 files changed, 27 insertions(+), 97 deletions(-) delete mode 100644 src/app/app.component.spec.ts create mode 100644 src/app/over-highlight.directive.ts delete mode 100644 src/app/task.ts delete mode 100644 src/app/task/task.component.css delete mode 100644 src/app/task/task.component.html delete mode 100644 src/app/task/task.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 437fe71..2ee62a0 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,3 @@ - - + +

當游標移到這裡，會改變文字顏色

+ diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts deleted file mode 100644 index 6c98b2e..0000000 --- a/src/app/app.component.spec.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { RouterTestingModule } from '@angular/router/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [ - RouterTestingModule - ], - declarations: [ - AppComponent - ], - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have as title 'Learn'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('Learn'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('.content span')?.textContent).toContain('Learn app is running!'); - }); -}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index fe3ea8e..acad835 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,5 @@ import { Component } from '@angular/core'; -import { Task } from './task'; @Component({ selector: 'my-app', @@ -8,21 +7,5 @@ import { Task } from './task'; styleUrls: [ './app.component.css' ] }) export class AppComponent { - tasks: Task[] = [ - new Task({ TaskSn: '001', TaskName: '待辦事項 A', State: 'Finish' }), - new Task({ TaskSn: '002', TaskName: '待辦事項 B', State: 'Doing' }), - new Task({ TaskSn: '003', TaskName: '待辦事項 C', State: 'None' }), - new Task({ TaskSn: '004', TaskName: '待辦事項 D', State: 'None' }), - ]; - trackByItems(index:number, task:Task):string{ - return task.TaskSn; } - onReset():void{ - this.tasks=[ - new Task({ TaskSn: '001', TaskName: '待辦事項 A', State: 'Finish' }), - new Task({ TaskSn: '002', TaskName: '待辦事項 B', State: 'Doing' }), - new Task({ TaskSn: '004', TaskName: '待辦事項 C', State: 'None' }), - new Task({ TaskSn: '005', TaskName: '待辦事項 D', State: 'None' }), - ]; - } -} + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 143cbab..2b41a28 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,11 +3,11 @@ import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; -import { TaskComponent } from './task/task.component'; +import { OverHighlightDirective } from './over-highlight.directive'; @NgModule({ imports: [ BrowserModule, FormsModule ], - declarations: [ AppComponent, TaskComponent ], + declarations: [ AppComponent, OverHighlightDirective ], bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/src/app/over-highlight.directive.ts b/src/app/over-highlight.directive.ts new file mode 100644 index 0000000..0ba3756 --- /dev/null +++ b/src/app/over-highlight.directive.ts @@ -0,0 +1,21 @@ +import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core'; + +@Directive({ + selector: '[appOverHighlight]' +}) +export class OverHighlightDirective { + + constructor(private elRef: ElementRef, private renderer: Renderer2) { + + } + @HostListener('mouseover') + onMouseOver() { + this.renderer.setStyle(this.elRef.nativeElement, 'color', 'red'); + } + + @HostListener('mouseout') + onMouseOut() { + this.renderer.removeStyle(this.elRef.nativeElement, 'color'); + } + +} diff --git a/src/app/task.ts b/src/app/task.ts deleted file mode 100644 index 1ee6859..0000000 --- a/src/app/task.ts +++ /dev/null @@ -1,9 +0,0 @@ -export class Task { - constructor(initData?: Partial) { - Object.assign(this, initData); - } - - TaskSn!: string; - TaskName!: string; - State!: string; -} diff --git a/src/app/task/task.component.css b/src/app/task/task.component.css deleted file mode 100644 index 0d51aa7..0000000 --- a/src/app/task/task.component.css +++ /dev/null @@ -1,14 +0,0 @@ -:host { - display: flex; - justify-content: space-between; - margin: 10px 20px; - padding-left: 5px; - padding-right: 10px; - border: solid 1px #aaa; - line-height: 32pt; -} - -:host(.odd) { - background-color: #777; - color: white; -} diff --git a/src/app/task/task.component.html b/src/app/task/task.component.html deleted file mode 100644 index 77a9e95..0000000 --- a/src/app/task/task.component.html +++ /dev/null @@ -1,2 +0,0 @@ -{{ task.TaskSn }} -{{task.TaskName}} diff --git a/src/app/task/task.component.ts b/src/app/task/task.component.ts deleted file mode 100644 index b01eee6..0000000 --- a/src/app/task/task.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component, Input } from '@angular/core'; - -import { Task } from '../task'; - -@Component({ - selector: 'app-task', - templateUrl: './task.component.html', - styleUrls: ['./task.component.css'] -}) -export class TaskComponent { - @Input() task!: Task; -} From 5bd08dfd5ccb922f698ffa239dffa37b98bef270 Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sat, 5 Nov 2022 15:42:26 +0800 Subject: [PATCH 02/20] =?UTF-8?q?@HostBinding=20=E8=A3=9D=E9=A3=BE?= =?UTF-8?q?=E5=99=A8=20=E5=8F=AF=E4=BB=A5=E8=A8=AD=E5=AE=9Aclass=E5=B1=AC?= =?UTF-8?q?=E6=80=A7=EF=BC=8C=E5=8E=BB=E5=BD=B1=E9=9F=BF=E5=AE=BF=E4=B8=BB?= =?UTF-8?q?=E5=85=83=E7=B4=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.css | 4 ++++ src/app/app.component.html | 3 +-- src/app/over-highlight.directive.ts | 14 ++++++-------- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/app/app.component.css b/src/app/app.component.css index ba43f51..84f5935 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -1,3 +1,7 @@ p { font-family: Lato; } + +p.overing { + color: green; +} diff --git a/src/app/app.component.html b/src/app/app.component.html index 2ee62a0..75a2411 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1,2 @@ -

當游標移到這裡，會改變文字顏色

- +

這裡套上了就不會改變顏色

diff --git a/src/app/over-highlight.directive.ts b/src/app/over-highlight.directive.ts index 0ba3756..d80e3f4 100644 --- a/src/app/over-highlight.directive.ts +++ b/src/app/over-highlight.directive.ts @@ -1,21 +1,19 @@ -import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core'; +import { Directive, HostBinding, HostListener } from '@angular/core'; @Directive({ - selector: '[appOverHighlight]' + selector: '[appOverHighlight]', }) export class OverHighlightDirective { + @HostBinding('class.overing') + isOvering = false; - constructor(private elRef: ElementRef, private renderer: Renderer2) { - - } @HostListener('mouseover') onMouseOver() { - this.renderer.setStyle(this.elRef.nativeElement, 'color', 'red'); + this.isOvering = true; } @HostListener('mouseout') onMouseOut() { - this.renderer.removeStyle(this.elRef.nativeElement, 'color'); + this.isOvering = false; } - } From 3e094d0490ee32bea54fc9654852b85d5371f04a Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sat, 5 Nov 2022 15:52:20 +0800 Subject: [PATCH 03/20] =?UTF-8?q?=E4=BD=BF=E7=94=A8angular=20=E5=85=A7?= =?UTF-8?q?=E9=83=A8pipe=EF=BC=8C=E5=81=9A=E9=A1=AF=E7=A4=BA=E6=96=87?= =?UTF-8?q?=E5=AD=97=E6=A0=BC=E5=BC=8F=E7=9A=84=E6=94=B9=E8=AE=8A=20?= =?UTF-8?q?=E5=8F=AA=E6=94=B9=E8=AE=8A=E9=A1=AF=E7=A4=BA=E6=96=87=E5=AD=97?= =?UTF-8?q?=EF=BC=8C=E8=80=8C=E4=B8=8D=E6=94=B9=E8=AE=8A=E6=96=87=E5=AD=97?= =?UTF-8?q?=E5=85=A7=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.html | 5 +++-- src/app/app.module.ts | 3 +-- src/app/over-highlight.directive.ts | 19 ------------------- 3 files changed, 4 insertions(+), 23 deletions(-) delete mode 100644 src/app/over-highlight.directive.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 75a2411..05ee3d7 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,2 +1,3 @@ -

當游標移到這裡，會改變文字顏色

-

這裡套上了就不會改變顏色

+
Upper Case: {{ 'angular' | uppercase }}
+
lower Case: {{ 'angular' | lowercase }}
+
Title Case: {{ 'angular' | titlecase }}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2b41a28..93c6719 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,11 +3,10 @@ import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; -import { OverHighlightDirective } from './over-highlight.directive'; @NgModule({ imports: [ BrowserModule, FormsModule ], - declarations: [ AppComponent, OverHighlightDirective ], + declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/src/app/over-highlight.directive.ts b/src/app/over-highlight.directive.ts deleted file mode 100644 index d80e3f4..0000000 --- a/src/app/over-highlight.directive.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Directive, HostBinding, HostListener } from '@angular/core'; - -@Directive({ - selector: '[appOverHighlight]', -}) -export class OverHighlightDirective { - @HostBinding('class.overing') - isOvering = false; - - @HostListener('mouseover') - onMouseOver() { - this.isOvering = true; - } - - @HostListener('mouseout') - onMouseOut() { - this.isOvering = false; - } -} From ee9fae2d1236dd89bcce0aefee0da0d4074ff904 Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sat, 5 Nov 2022 16:03:09 +0800 Subject: [PATCH 04/20] =?UTF-8?q?SlicePipe=EF=BC=8C=E5=8F=AF=E4=BB=A5?= =?UTF-8?q?=E5=81=9A=E6=96=87=E5=AD=97=E6=8E=92=E7=89=88=E5=88=87=E5=89=B2?= =?UTF-8?q?=EF=BC=8C=E8=B5=B7=E5=A7=8B=E4=BD=8D=E7=BD=AE=E5=BE=9E0?= =?UTF-8?q?=E7=AE=97=E8=B5=B7=20{{value=5Fexpressiong=20|slice:=20start=20?= =?UTF-8?q?[:end]}}=20=E4=B9=9F=E5=8F=AF=E4=BB=A5=E5=A5=97=E7=94=A8?= =?UTF-8?q?=E5=9C=A8=E9=99=A3=E5=88=97=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.html | 16 +++++++++++++--- src/app/app.component.ts | 9 +++++++++ src/app/app.module.ts | 3 ++- src/app/task.ts | 9 +++++++++ src/app/task/task.component.css | 14 ++++++++++++++ src/app/task/task.component.html | 6 ++++++ src/app/task/task.component.ts | 12 ++++++++++++ 7 files changed, 65 insertions(+), 4 deletions(-) create mode 100644 src/app/task.ts create mode 100644 src/app/task/task.component.css create mode 100644 src/app/task/task.component.html create mode 100644 src/app/task/task.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 05ee3d7..d94d963 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1,13 @@ -
Upper Case: {{ 'angular' | uppercase }}
-
lower Case: {{ 'angular' | lowercase }}
-
Title Case: {{ 'angular' | titlecase }}
+

SlicePipe 使用在字串上

+
+ 完整字串 - {{ value }} +
+
+ Slice 字串 - {{ value | slice: 0:6 }} +
+
+

Slice Pipe 使用在陣列上

+ +
+ 待辦事項共 {{ tasks.length }} 件 +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index acad835..11a2c31 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { Task } from './task'; @Component({ @@ -7,5 +8,13 @@ import { Component } from '@angular/core'; styleUrls: [ './app.component.css' ] }) export class AppComponent { + value = '只會顯示七個字（這裡全不顯示）'; + + tasks: Task[] = [ + new Task({ TaskSn: '001', TaskName: '待辦事項 A', State: 'Finish' }), + new Task({ TaskSn: '002', TaskName: '待辦事項 B', State: 'Doing' }), + new Task({ TaskSn: '003', TaskName: '待辦事項 C', State: 'None' }), + new Task({ TaskSn: '004', TaskName: '待辦事項 D', State: 'None' }), + ]; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 93c6719..143cbab 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,10 +3,11 @@ import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; +import { TaskComponent } from './task/task.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], - declarations: [ AppComponent ], + declarations: [ AppComponent, TaskComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/src/app/task.ts b/src/app/task.ts new file mode 100644 index 0000000..1ee6859 --- /dev/null +++ b/src/app/task.ts @@ -0,0 +1,9 @@ +export class Task { + constructor(initData?: Partial) { + Object.assign(this, initData); + } + + TaskSn!: string; + TaskName!: string; + State!: string; +} diff --git a/src/app/task/task.component.css b/src/app/task/task.component.css new file mode 100644 index 0000000..0d51aa7 --- /dev/null +++ b/src/app/task/task.component.css @@ -0,0 +1,14 @@ +:host { + display: flex; + justify-content: space-between; + margin: 10px 20px; + padding-left: 5px; + padding-right: 10px; + border: solid 1px #aaa; + line-height: 32pt; +} + +:host(.odd) { + background-color: #777; + color: white; +} diff --git a/src/app/task/task.component.html b/src/app/task/task.component.html new file mode 100644 index 0000000..0de7c48 --- /dev/null +++ b/src/app/task/task.component.html @@ -0,0 +1,6 @@ +{{ task.TaskName }} + + 進行中 + 已完成 + 未安排 + diff --git a/src/app/task/task.component.ts b/src/app/task/task.component.ts new file mode 100644 index 0000000..b01eee6 --- /dev/null +++ b/src/app/task/task.component.ts @@ -0,0 +1,12 @@ +import { Component, Input } from '@angular/core'; + +import { Task } from '../task'; + +@Component({ + selector: 'app-task', + templateUrl: './task.component.html', + styleUrls: ['./task.component.css'] +}) +export class TaskComponent { + @Input() task!: Task; +} From 691065d11bd663fbc9cbf96f0c4f13c26845f393 Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sat, 5 Nov 2022 16:14:54 +0800 Subject: [PATCH 05/20] =?UTF-8?q?KeyValuePipe=20=E5=8F=AF=E4=BB=A5?= =?UTF-8?q?=E6=8F=90=E5=8F=96=E5=87=BA=E9=99=A3=E5=88=97=E4=B8=AD=E7=9A=84?= =?UTF-8?q?=E9=99=A3=E5=88=97=E4=B8=AD=E7=9A=84keyValue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.css | 15 +++++++++++++-- src/app/app.component.html | 23 ++++++++++------------- src/app/app.component.ts | 22 ++++++++++------------ 3 files changed, 33 insertions(+), 27 deletions(-) diff --git a/src/app/app.component.css b/src/app/app.component.css index 84f5935..c608be2 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -2,6 +2,17 @@ p { font-family: Lato; } -p.overing { - color: green; +table { + border-width: 2px; + border-collapse: collapse; +} + +tr > td:first-child { + text-align: center; +} + +th, +td { + width: 150px; + padding: 10px; } diff --git a/src/app/app.component.html b/src/app/app.component.html index d94d963..61c111a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,13 +1,10 @@ -

SlicePipe 使用在字串上

-
- 完整字串 - {{ value }} -
-
- Slice 字串 - {{ value | slice: 0:6 }} -
-
-

Slice Pipe 使用在陣列上

- -
- 待辦事項共 {{ tasks.length }} 件 -
+ + + + + + + + + +
欄位內容
{{ columnDesc[t.key] }}{{ t.value }}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 11a2c31..68c7ba4 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,20 +1,18 @@ import { Component } from '@angular/core'; -import { Task } from './task'; +import { Task } from './task'; @Component({ selector: 'my-app', templateUrl: './app.component.html', - styleUrls: [ './app.component.css' ] + styleUrls: ['./app.component.css'], }) -export class AppComponent { - value = '只會顯示七個字（這裡全不顯示）'; - - tasks: Task[] = [ - new Task({ TaskSn: '001', TaskName: '待辦事項 A', State: 'Finish' }), - new Task({ TaskSn: '002', TaskName: '待辦事項 B', State: 'Doing' }), - new Task({ TaskSn: '003', TaskName: '待辦事項 C', State: 'None' }), - new Task({ TaskSn: '004', TaskName: '待辦事項 D', State: 'None' }), - ]; - } +export class AppComponent { + task = new Task({ TaskSn: '001', TaskName: '待辦事項 A', State: 'Finish' }); + columnDesc = { + TaskSn: '編號', + TaskName: '名稱', + State: '狀態', + }; +} From 9679033e34c4670086657ee76f9e80b8bde7652e Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sat, 5 Nov 2022 16:21:47 +0800 Subject: [PATCH 06/20] =?UTF-8?q?=E6=95=B8=E5=80=BC=E8=B3=87=E6=96=99?= =?UTF-8?q?=E9=A1=AF=E7=A4=BA-DecimalPipe?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.html | 12 ++---------- src/app/app.component.ts | 16 ++++------------ 2 files changed, 6 insertions(+), 22 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 61c111a..d70c493 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,10 +1,2 @@ - - - - - - - - - -
欄位內容
{{ columnDesc[t.key] }}{{ t.value }}
+
預設數值顯示：{{ pi | number }}
+
指定整數與小數長度：{{ pi | number: '4.1-5' }}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 68c7ba4..1e0d456 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,18 +1,10 @@ -import { Component } from '@angular/core'; - -import { Task } from './task'; +import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'], + styleUrls: [ './app.component.css' ] }) -export class AppComponent { - task = new Task({ TaskSn: '001', TaskName: '待辦事項 A', State: 'Finish' }); - - columnDesc = { - TaskSn: '編號', - TaskName: '名稱', - State: '狀態', - }; +export class AppComponent { + pi = 3.1415926; } From cc3a013026cc903bb8b1fc0762b9e8d0449c0f3d Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sat, 5 Nov 2022 16:37:10 +0800 Subject: [PATCH 07/20] PercentPipe {{value_expression | percent [:'digitsInfo' [:local]}} --- src/app/app.component.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index d70c493..05fad01 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,2 +1 @@ -
預設數值顯示：{{ pi | number }}
-
指定整數與小數長度：{{ pi | number: '4.1-5' }}
+
百分率：{{ pi | percent: '2.2-4' }}
From 93245b6bc78a888abb63003b3e2485548aea46e6 Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sat, 5 Nov 2022 16:39:44 +0800 Subject: [PATCH 08/20] CurrencyPipe --- src/app/app.component.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 05fad01..df235d6 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1,3 @@ -
百分率：{{ pi | percent: '2.2-4' }}
+
金額：{{ 25000 | currency }}
+
CAD 貨幣碼：{{ 25000 | currency: "CAD" }}
+
貨幣指示格式：{{ 25000 | currency: "EUR":"symbol" }}
From db845bfee2f2c804bd122b748d653c9e3a185044 Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sat, 5 Nov 2022 16:46:12 +0800 Subject: [PATCH 09/20] =?UTF-8?q?DatePipe=EF=BC=8C=E8=A9=B3=E7=B4=B0?= =?UTF-8?q?=E8=AB=8B=E6=9F=A5=E9=96=B1=E7=B6=B2=E8=B7=AF=E7=94=A8=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.html | 4 +--- src/app/app.component.ts | 8 ++++---- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index df235d6..8aa119e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1 @@ -
金額：{{ 25000 | currency }}
-
CAD 貨幣碼：{{ 25000 | currency: "CAD" }}
-
貨幣指示格式：{{ 25000 | currency: "EUR":"symbol" }}
+UTC時間：{{ now | date: "long":"+0800" }} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 1e0d456..412a3bb 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,10 @@ -import { Component, VERSION } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', - styleUrls: [ './app.component.css' ] + styleUrls: ['./app.component.css'], }) -export class AppComponent { - pi = 3.1415926; +export class AppComponent { + now = new Date(); } From 6e9b7d075a0b1058a862b96935e003178644727e Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sat, 5 Nov 2022 16:57:11 +0800 Subject: [PATCH 10/20] =?UTF-8?q?=E8=87=AA=E8=A8=82Pipe=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=EF=BC=8C=E4=BD=BF=E7=94=A8=20ng=20generate=20pipe=20[=E7=AE=A1?= =?UTF-8?q?=E9=81=93=E5=90=8D=E7=A8=B1]=20=E6=9C=AC=E7=AF=84=E4=BE=8B?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E8=87=AA=E8=A8=82Orderby=E6=8E=92=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.html | 2 +- src/app/app.component.ts | 13 ++++++++++--- src/app/app.module.ts | 3 ++- src/app/order-by.pipe.ts | 14 ++++++++++++++ 4 files changed, 27 insertions(+), 5 deletions(-) create mode 100644 src/app/order-by.pipe.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 8aa119e..592ce9b 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1 @@ -UTC時間：{{ now | date: "long":"+0800" }} + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 412a3bb..e4221f9 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,17 @@ import { Component } from '@angular/core'; +import { Task } from './task'; + @Component({ selector: 'my-app', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'], + styleUrls: [ './app.component.css' ] }) -export class AppComponent { - now = new Date(); +export class AppComponent { + tasks: Task[] = [ + new Task({ TaskSn: '001', TaskName: '待辦事項 A', State: 'Finish' }), + new Task({ TaskSn: '002', TaskName: '待辦事項 B', State: 'Doing' }), + new Task({ TaskSn: '003', TaskName: '待辦事項 C', State: 'None' }), + new Task({ TaskSn: '004', TaskName: '待辦事項 D', State: 'None' }), + ]; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 143cbab..0187ece 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,10 +4,11 @@ import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { TaskComponent } from './task/task.component'; +import { OrderByPipe } from './order-by.pipe'; @NgModule({ imports: [ BrowserModule, FormsModule ], - declarations: [ AppComponent, TaskComponent ], + declarations: [ AppComponent, TaskComponent, OrderByPipe ], bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/src/app/order-by.pipe.ts b/src/app/order-by.pipe.ts new file mode 100644 index 0000000..2c769af --- /dev/null +++ b/src/app/order-by.pipe.ts @@ -0,0 +1,14 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'orderBy' +}) +export class OrderByPipe implements PipeTransform { + + transform(list: any[], prop: string): any[] { + return list.sort((a, b) => a[prop] >b[prop] + ?1 + :a[prop]=== b[prop] ?0: -1) + } + +} From d506925fb73926c49420fa1b21a8c31bbf170c4d Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sun, 6 Nov 2022 13:17:46 +0800 Subject: [PATCH 11/20] =?UTF-8?q?=E4=BD=BF=E7=94=A8service=E6=B3=A8?= =?UTF-8?q?=E5=85=A5=E5=8A=9F=E8=83=BD=20task.service=E7=9A=84gettasks?= =?UTF-8?q?=EF=BC=8C=E6=B3=A8=E5=85=A5app.component.ts=20constructor?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.html | 2 +- src/app/app.component.ts | 20 +++++++++++--------- src/app/app.module.ts | 4 +--- src/app/order-by.pipe.ts | 14 -------------- src/app/task.service.ts | 19 +++++++++++++++++++ src/app/task/task.component.css | 14 -------------- src/app/task/task.component.html | 6 ------ src/app/task/task.component.ts | 12 ------------ 8 files changed, 32 insertions(+), 59 deletions(-) delete mode 100644 src/app/order-by.pipe.ts create mode 100644 src/app/task.service.ts delete mode 100644 src/app/task/task.component.css delete mode 100644 src/app/task/task.component.html delete mode 100644 src/app/task/task.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 592ce9b..ec4a8ff 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1 @@ - +
{{ tasks | json }}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e4221f9..350eb5d 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,17 +1,19 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { Task } from './task'; +import { TaskService } from './task.service'; @Component({ selector: 'my-app', templateUrl: './app.component.html', - styleUrls: [ './app.component.css' ] + styleUrls: ['./app.component.css'], }) -export class AppComponent { - tasks: Task[] = [ - new Task({ TaskSn: '001', TaskName: '待辦事項 A', State: 'Finish' }), - new Task({ TaskSn: '002', TaskName: '待辦事項 B', State: 'Doing' }), - new Task({ TaskSn: '003', TaskName: '待辦事項 C', State: 'None' }), - new Task({ TaskSn: '004', TaskName: '待辦事項 D', State: 'None' }), - ]; +export class AppComponent implements OnInit { + tasks!: Task[]; + + constructor(private taskService: TaskService) {} + + ngOnInit(): void { + this.tasks = this.taskService.getTasks(); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0187ece..93c6719 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,12 +3,10 @@ import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; -import { TaskComponent } from './task/task.component'; -import { OrderByPipe } from './order-by.pipe'; @NgModule({ imports: [ BrowserModule, FormsModule ], - declarations: [ AppComponent, TaskComponent, OrderByPipe ], + declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/src/app/order-by.pipe.ts b/src/app/order-by.pipe.ts deleted file mode 100644 index 2c769af..0000000 --- a/src/app/order-by.pipe.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Pipe, PipeTransform } from '@angular/core'; - -@Pipe({ - name: 'orderBy' -}) -export class OrderByPipe implements PipeTransform { - - transform(list: any[], prop: string): any[] { - return list.sort((a, b) => a[prop] >b[prop] - ?1 - :a[prop]=== b[prop] ?0: -1) - } - -} diff --git a/src/app/task.service.ts b/src/app/task.service.ts new file mode 100644 index 0000000..0117c35 --- /dev/null +++ b/src/app/task.service.ts @@ -0,0 +1,19 @@ +import { Injectable } from '@angular/core'; + +import { Task } from './task'; + +@Injectable({ + providedIn: 'root', +}) +export class TaskService { + constructor() {} + + getTasks(): Task[] { + return [ + new Task({ TaskSn: '001', TaskName: '待辦事項 A', State: 'Finish' }), + new Task({ TaskSn: '002', TaskName: '待辦事項 B', State: 'Doing' }), + new Task({ TaskSn: '003', TaskName: '待辦事項 C', State: 'None' }), + new Task({ TaskSn: '004', TaskName: '待辦事項 D', State: 'None' }), + ]; + } +} diff --git a/src/app/task/task.component.css b/src/app/task/task.component.css deleted file mode 100644 index 0d51aa7..0000000 --- a/src/app/task/task.component.css +++ /dev/null @@ -1,14 +0,0 @@ -:host { - display: flex; - justify-content: space-between; - margin: 10px 20px; - padding-left: 5px; - padding-right: 10px; - border: solid 1px #aaa; - line-height: 32pt; -} - -:host(.odd) { - background-color: #777; - color: white; -} diff --git a/src/app/task/task.component.html b/src/app/task/task.component.html deleted file mode 100644 index 0de7c48..0000000 --- a/src/app/task/task.component.html +++ /dev/null @@ -1,6 +0,0 @@ -{{ task.TaskName }} - - 進行中 - 已完成 - 未安排 - diff --git a/src/app/task/task.component.ts b/src/app/task/task.component.ts deleted file mode 100644 index b01eee6..0000000 --- a/src/app/task/task.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component, Input } from '@angular/core'; - -import { Task } from '../task'; - -@Component({ - selector: 'app-task', - templateUrl: './task.component.html', - styleUrls: ['./task.component.css'] -}) -export class TaskComponent { - @Input() task!: Task; -} From 861c679ce122d92b36112969108815ba408bd94b Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sun, 6 Nov 2022 14:35:52 +0800 Subject: [PATCH 12/20] =?UTF-8?q?Service=20Interaction=20=EF=BC=8CService?= =?UTF-8?q?=20=E6=B0=B4=E5=B9=B3=E4=BA=92=E5=8B=95=20APP.component?= =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96Service=20Value=20font-size=20?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=95=AB=E9=9D=A2=E6=94=B9=E8=AE=8AValue=20o?= =?UTF-8?q?ther=E5=89=87=E9=A1=AF=E7=A4=BA=E5=87=BA=E5=89=87=E9=A1=AF?= =?UTF-8?q?=E7=A4=BA=E5=87=BAValue=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.html | 3 ++- src/app/app.component.ts | 9 +++------ src/app/app.module.ts | 4 +++- src/app/font-size.service.ts | 8 ++++++++ src/app/font-size/font-size.component.css | 0 src/app/font-size/font-size.component.html | 6 ++++++ src/app/font-size/font-size.component.ts | 17 +++++++++++++++++ src/app/other/other.component.css | 0 src/app/other/other.component.html | 1 + src/app/other/other.component.ts | 16 ++++++++++++++++ src/app/task.service.ts | 19 ------------------- src/app/task.ts | 9 --------- 12 files changed, 56 insertions(+), 36 deletions(-) create mode 100644 src/app/font-size.service.ts create mode 100644 src/app/font-size/font-size.component.css create mode 100644 src/app/font-size/font-size.component.html create mode 100644 src/app/font-size/font-size.component.ts create mode 100644 src/app/other/other.component.css create mode 100644 src/app/other/other.component.html create mode 100644 src/app/other/other.component.ts delete mode 100644 src/app/task.service.ts delete mode 100644 src/app/task.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index ec4a8ff..546b963 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1,2 @@ -
{{ tasks | json }}
+ + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 350eb5d..a807179 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,7 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { FontSizeService } from './font-size.service'; -import { Task } from './task'; -import { TaskService } from './task.service'; @Component({ selector: 'my-app', @@ -9,11 +8,9 @@ import { TaskService } from './task.service'; styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { - tasks!: Task[]; - - constructor(private taskService: TaskService) {} + constructor(public fontSizeService: FontSizeService) {} ngOnInit(): void { - this.tasks = this.taskService.getTasks(); + this.fontSizeService.size = 10; } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 93c6719..45c9d60 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,10 +3,12 @@ import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; +import { OtherComponent } from './other/other.component'; +import { FontSizeComponent } from './font-size/font-size.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], - declarations: [ AppComponent ], + declarations: [ AppComponent, OtherComponent, FontSizeComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/src/app/font-size.service.ts b/src/app/font-size.service.ts new file mode 100644 index 0000000..c4db624 --- /dev/null +++ b/src/app/font-size.service.ts @@ -0,0 +1,8 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class FontSizeService { +size!:number +} diff --git a/src/app/font-size/font-size.component.css b/src/app/font-size/font-size.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/font-size/font-size.component.html b/src/app/font-size/font-size.component.html new file mode 100644 index 0000000..f8711f5 --- /dev/null +++ b/src/app/font-size/font-size.component.html @@ -0,0 +1,6 @@ + + diff --git a/src/app/font-size/font-size.component.ts b/src/app/font-size/font-size.component.ts new file mode 100644 index 0000000..69144df --- /dev/null +++ b/src/app/font-size/font-size.component.ts @@ -0,0 +1,17 @@ +import { FontSizeService } from './../font-size.service'; +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-font-size', + templateUrl: './font-size.component.html', + styleUrls: ['./font-size.component.css'] +}) +export class FontSizeComponent { + + constructor(public fontSizeService:FontSizeService) { } + + onSetFontSize(value: number): void { + this.fontSizeService.size += value; + } + +} diff --git a/src/app/other/other.component.css b/src/app/other/other.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/other/other.component.html b/src/app/other/other.component.html new file mode 100644 index 0000000..44df1e1 --- /dev/null +++ b/src/app/other/other.component.html @@ -0,0 +1 @@ +

目前文字尺寸：{{ fontSizeService.size }} pt

diff --git a/src/app/other/other.component.ts b/src/app/other/other.component.ts new file mode 100644 index 0000000..afa83a6 --- /dev/null +++ b/src/app/other/other.component.ts @@ -0,0 +1,16 @@ +import { FontSizeService } from './../font-size.service'; +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-other', + templateUrl: './other.component.html', + styleUrls: ['./other.component.css'] +}) +export class OtherComponent implements OnInit { + + constructor(public fontSizeService:FontSizeService) { } + + ngOnInit(): void { + } + +} diff --git a/src/app/task.service.ts b/src/app/task.service.ts deleted file mode 100644 index 0117c35..0000000 --- a/src/app/task.service.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Injectable } from '@angular/core'; - -import { Task } from './task'; - -@Injectable({ - providedIn: 'root', -}) -export class TaskService { - constructor() {} - - getTasks(): Task[] { - return [ - new Task({ TaskSn: '001', TaskName: '待辦事項 A', State: 'Finish' }), - new Task({ TaskSn: '002', TaskName: '待辦事項 B', State: 'Doing' }), - new Task({ TaskSn: '003', TaskName: '待辦事項 C', State: 'None' }), - new Task({ TaskSn: '004', TaskName: '待辦事項 D', State: 'None' }), - ]; - } -} diff --git a/src/app/task.ts b/src/app/task.ts deleted file mode 100644 index 1ee6859..0000000 --- a/src/app/task.ts +++ /dev/null @@ -1,9 +0,0 @@ -export class Task { - constructor(initData?: Partial) { - Object.assign(this, initData); - } - - TaskSn!: string; - TaskName!: string; - State!: string; -} From 13726233ea5f0adcdbbd193f73b3fed7be7fff90 Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sun, 6 Nov 2022 15:13:47 +0800 Subject: [PATCH 13/20] =?UTF-8?q?UseClass=E6=8A=BD=E8=B1=A1=E6=9C=8D?= =?UTF-8?q?=E5=8B=99=20App.component=E5=85=A7=E9=83=A8provider=E4=BD=BF?= =?UTF-8?q?=E7=94=A8useClass:OrderDiscountService=20=E5=8F=AF=E4=BB=A5?= =?UTF-8?q?=E7=9B=B4=E6=8E=A5=E6=8A=BD=E6=8F=9B=E5=8E=9F=E6=9C=AC=E7=9A=84?= =?UTF-8?q?=E8=A8=82=E5=96=AE=E6=9C=8D=E5=8B=99=EF=BC=8C=E9=99=8D=E4=BD=8E?= =?UTF-8?q?=E6=94=B9=E7=89=88=E5=B0=8D=E6=96=BC=E6=95=B4=E9=AB=94=E7=9A=84?= =?UTF-8?q?=E5=BD=B1=E9=9F=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.css | 2 +- src/app/app.component.html | 16 ++++++++++++++-- src/app/app.component.ts | 13 ++++++++++--- src/app/app.module.ts | 13 +++++++------ src/app/font-size.service.ts | 8 -------- src/app/font-size/font-size.component.css | 0 src/app/font-size/font-size.component.html | 6 ------ src/app/font-size/font-size.component.ts | 17 ----------------- src/app/order-detail.ts | 9 +++++++++ src/app/order-discount.service.ts | 17 +++++++++++++++++ src/app/order.service.ts | 18 ++++++++++++++++++ src/app/other/other.component.css | 0 src/app/other/other.component.html | 1 - src/app/other/other.component.ts | 16 ---------------- 14 files changed, 76 insertions(+), 60 deletions(-) delete mode 100644 src/app/font-size.service.ts delete mode 100644 src/app/font-size/font-size.component.css delete mode 100644 src/app/font-size/font-size.component.html delete mode 100644 src/app/font-size/font-size.component.ts create mode 100644 src/app/order-detail.ts create mode 100644 src/app/order-discount.service.ts create mode 100644 src/app/order.service.ts delete mode 100644 src/app/other/other.component.css delete mode 100644 src/app/other/other.component.html delete mode 100644 src/app/other/other.component.ts diff --git a/src/app/app.component.css b/src/app/app.component.css index c608be2..9376939 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -7,7 +7,7 @@ table { border-collapse: collapse; } -tr > td:first-child { +tr > td { text-align: center; } diff --git a/src/app/app.component.html b/src/app/app.component.html index 546b963..beecf5f 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,2 +1,14 @@ - - + + + + + + + + + + + + + +
單價數量
{{ item.UnitPrice }}{{ item.PurchaseCount }}
總金額{{ total }}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a807179..010340b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { FontSizeService } from './font-size.service'; +import { OrderDetail } from './order-detail'; +import { OrderService } from './order.service'; @Component({ selector: 'my-app', @@ -8,9 +9,15 @@ import { FontSizeService } from './font-size.service'; styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { - constructor(public fontSizeService: FontSizeService) {} + total = 0; + + constructor(public orderService: OrderService) {} ngOnInit(): void { - this.fontSizeService.size = 10; + this.orderService.details = [ + new OrderDetail({ PurchaseCount: 2, UnitPrice: 200 }), + new OrderDetail({ PurchaseCount: 4, UnitPrice: 50 }), + ]; + this.total = this.orderService.computeTotal(); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 45c9d60..304f9ba 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,12 +3,13 @@ import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; -import { OtherComponent } from './other/other.component'; -import { FontSizeComponent } from './font-size/font-size.component'; +import { OrderService } from './order.service'; +import { OrderDiscountService } from './order-discount.service'; @NgModule({ - imports: [ BrowserModule, FormsModule ], - declarations: [ AppComponent, OtherComponent, FontSizeComponent ], - bootstrap: [ AppComponent ] + imports: [BrowserModule, FormsModule], + declarations: [AppComponent], + providers: [{ provide: OrderService, useClass: OrderDiscountService }], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/src/app/font-size.service.ts b/src/app/font-size.service.ts deleted file mode 100644 index c4db624..0000000 --- a/src/app/font-size.service.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable({ - providedIn: 'root' -}) -export class FontSizeService { -size!:number -} diff --git a/src/app/font-size/font-size.component.css b/src/app/font-size/font-size.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/font-size/font-size.component.html b/src/app/font-size/font-size.component.html deleted file mode 100644 index f8711f5..0000000 --- a/src/app/font-size/font-size.component.html +++ /dev/null @@ -1,6 +0,0 @@ - - diff --git a/src/app/font-size/font-size.component.ts b/src/app/font-size/font-size.component.ts deleted file mode 100644 index 69144df..0000000 --- a/src/app/font-size/font-size.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { FontSizeService } from './../font-size.service'; -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-font-size', - templateUrl: './font-size.component.html', - styleUrls: ['./font-size.component.css'] -}) -export class FontSizeComponent { - - constructor(public fontSizeService:FontSizeService) { } - - onSetFontSize(value: number): void { - this.fontSizeService.size += value; - } - -} diff --git a/src/app/order-detail.ts b/src/app/order-detail.ts new file mode 100644 index 0000000..885abab --- /dev/null +++ b/src/app/order-detail.ts @@ -0,0 +1,9 @@ +export class OrderDetail { + constructor(initData?: Partial) { + Object.assign(this, initData); + } + + PurchaseCount!: number; + + UnitPrice!: number; +} diff --git a/src/app/order-discount.service.ts b/src/app/order-discount.service.ts new file mode 100644 index 0000000..221e81f --- /dev/null +++ b/src/app/order-discount.service.ts @@ -0,0 +1,17 @@ +import { Injectable } from '@angular/core'; + +import { OrderDetail } from './order-detail'; + +@Injectable() +export class OrderDiscountService { + details: OrderDetail[] = []; + + constructor() { } + + computeTotal(): number { + const total = this.details + .map((d) => d.PurchaseCount * d.UnitPrice) + .reduce((act, curr) => act + curr, 0); + return total * 0.9; + } +} diff --git a/src/app/order.service.ts b/src/app/order.service.ts new file mode 100644 index 0000000..6ad3401 --- /dev/null +++ b/src/app/order.service.ts @@ -0,0 +1,18 @@ +import { Injectable } from '@angular/core'; + +import { OrderDetail } from './order-detail'; + +@Injectable({ + providedIn: 'root', +}) +export class OrderService { + details: OrderDetail[] = []; + + constructor() {} + + computeTotal(): number { + return this.details + .map((d) => d.PurchaseCount * d.UnitPrice) + .reduce((act, curr) => act + curr, 0); + } +} diff --git a/src/app/other/other.component.css b/src/app/other/other.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/other/other.component.html b/src/app/other/other.component.html deleted file mode 100644 index 44df1e1..0000000 --- a/src/app/other/other.component.html +++ /dev/null @@ -1 +0,0 @@ -

目前文字尺寸：{{ fontSizeService.size }} pt

diff --git a/src/app/other/other.component.ts b/src/app/other/other.component.ts deleted file mode 100644 index afa83a6..0000000 --- a/src/app/other/other.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { FontSizeService } from './../font-size.service'; -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-other', - templateUrl: './other.component.html', - styleUrls: ['./other.component.css'] -}) -export class OtherComponent implements OnInit { - - constructor(public fontSizeService:FontSizeService) { } - - ngOnInit(): void { - } - -} From 776711cc2aa02bd9ffc46664998293d87804585a Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sun, 6 Nov 2022 15:17:30 +0800 Subject: [PATCH 14/20] =?UTF-8?q?useExisting=20=E6=8A=BD=E8=B1=A1=E6=9C=8D?= =?UTF-8?q?=E5=8B=99=20=E8=B7=9FuseClass=E9=A1=9E=E4=BC=BC=EF=BC=8C?= =?UTF-8?q?=E4=BD=86=E4=B8=8D=E6=9C=83=E5=BB=BA=E7=AB=8B=E6=96=B0=E7=9A=84?= =?UTF-8?q?=E5=AF=A6=E9=AB=94=EF=BC=8C=E8=80=8C=E6=98=AF=E5=8E=BB=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E7=95=B6=E5=89=8D=E5=B7=B2=E5=AD=98=E5=9C=A8=E7=9A=84?= =?UTF-8?q?=20=E5=A6=82=E6=9E=9C=E4=B8=8D=E5=AD=98=E5=9C=A8=E4=BB=BB?= =?UTF-8?q?=E4=BD=95=E5=AF=A6=E9=AB=94=E5=89=87=E6=9C=83=E6=8B=8B=E5=87=BA?= =?UTF-8?q?=E4=BE=8B=E5=A4=96=EF=BC=8C=E5=8F=AF=E4=BB=A5=E7=94=A8=E9=80=99?= =?UTF-8?q?=E7=A8=AE=E6=96=B9=E5=BC=8F=E6=B8=9B=E5=B0=91=E8=A2=AB=E9=87=8D?= =?UTF-8?q?=E8=A4=87=E5=BB=BA=E7=AB=8B=E7=9A=84=E5=AF=A6=E9=AB=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.module.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 304f9ba..a37a628 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,7 +9,8 @@ import { OrderDiscountService } from './order-discount.service'; @NgModule({ imports: [BrowserModule, FormsModule], declarations: [AppComponent], - providers: [{ provide: OrderService, useClass: OrderDiscountService }], + providers: [{ provide: OrderService, useExisting: OrderDiscountService },OrderDiscountService], + bootstrap: [AppComponent], }) export class AppModule {} From 0947394269f28c5c98175c01e11126197327e2f4 Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sun, 6 Nov 2022 15:30:56 +0800 Subject: [PATCH 15/20] =?UTF-8?q?useValue=E6=8A=BD=E8=B1=A1=E6=9C=8D?= =?UTF-8?q?=E5=8B=99=20=E5=8F=AF=E5=B0=87=E7=89=A9=E4=BB=B6=E5=AF=A6?= =?UTF-8?q?=E9=AB=94=E6=8A=BD=E6=8F=9B=E6=8E=89=E6=9C=8D=E5=8B=99=E9=A1=9E?= =?UTF-8?q?=E5=88=A5=EF=BC=8C=E5=8F=AF=E4=BB=A5=E9=80=8F=E9=81=8E=E5=BB=BA?= =?UTF-8?q?=E7=AB=8B=E9=96=93=E8=AB=9C=EF=BC=B3=EF=BC=B0=EF=BC=B9=E7=89=A9?= =?UTF-8?q?=E4=BB=B6=E6=A8=A1=E6=93=AC=E6=B8=AC=E8=A9=A6=E6=83=85=E5=A2=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.module.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a37a628..4370fb4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,7 +9,10 @@ import { OrderDiscountService } from './order-discount.service'; @NgModule({ imports: [BrowserModule, FormsModule], declarations: [AppComponent], - providers: [{ provide: OrderService, useExisting: OrderDiscountService },OrderDiscountService], + providers: [{ + provide: OrderService, + useValue:{computeTotal:()=>100}, + },], bootstrap: [AppComponent], }) From d8c39876e684f6441a27d080b7d145c75b6f3771 Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sun, 6 Nov 2022 15:41:02 +0800 Subject: [PATCH 16/20] =?UTF-8?q?FactoryService=E4=BD=BF=E7=94=A8=20?= =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E4=BD=BF=E7=94=A8useFactory=E8=A8=AD?= =?UTF-8?q?=E5=AE=9A=E6=A2=9D=E4=BB=B6=EF=BC=8C=E4=BE=86=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E4=B8=8D=E5=90=8C=E7=9A=84Service?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.module.ts | 20 ++++++++++++++------ src/app/order-anniversary.service.ts | 18 ++++++++++++++++++ 2 files changed, 32 insertions(+), 6 deletions(-) create mode 100644 src/app/order-anniversary.service.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4370fb4..dfd34c1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,16 +4,24 @@ import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { OrderService } from './order.service'; -import { OrderDiscountService } from './order-discount.service'; +import { OrderAnniversaryService } from './order-anniversary.service'; @NgModule({ imports: [BrowserModule, FormsModule], declarations: [AppComponent], - providers: [{ - provide: OrderService, - useValue:{computeTotal:()=>100}, - },], - + providers: [ + { + provide: OrderService, + useFactory: () => { + const today = new Date(2020, 9, 3); + if (today.getMonth() === 9) { + return new OrderAnniversaryService(); + } else { + return new OrderService(); + } + }, + }, + ], bootstrap: [AppComponent], }) export class AppModule {} diff --git a/src/app/order-anniversary.service.ts b/src/app/order-anniversary.service.ts new file mode 100644 index 0000000..d6ed08b --- /dev/null +++ b/src/app/order-anniversary.service.ts @@ -0,0 +1,18 @@ +import { Injectable } from '@angular/core'; + +import { OrderDetail } from './order-detail'; + +@Injectable({ + providedIn: 'root', +}) +export class OrderAnniversaryService { + details: OrderDetail[] = []; + + constructor() {} + + computeTotal(): number { + return this.details + .map((d) => d.PurchaseCount * d.UnitPrice * 0.8) + .reduce((act, curr) => act + curr, 0); + } +} From 6fdc2b379299f8f0e829c6be0930d1e42aaa21b6 Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sun, 6 Nov 2022 15:59:07 +0800 Subject: [PATCH 17/20] =?UTF-8?q?Service=20=E5=96=AE=E7=8D=A8=E5=9C=A8?= =?UTF-8?q?=E5=80=8B=E5=88=A5=E5=80=8B=E5=88=A5component=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=20provider=E5=8F=AF=E4=BB=A5=E4=BD=BF=E7=94=A8=E7=AF=84?= =?UTF-8?q?=E5=9C=8D=EF=BC=8C=E5=9C=A8component=E4=B8=AD=E4=BD=BF=E7=94=A8?= =?UTF-8?q?useValue=EF=BC=8C=E5=8F=AF=E4=BB=A5=E5=B0=87=E5=8F=AF=E4=BB=A5?= =?UTF-8?q?=E5=B0=87service=E9=99=90=E5=88=B6=E5=9C=A8=E6=8C=87=E5=AE=9Amo?= =?UTF-8?q?dule=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.html | 18 ++++-------------- src/app/app.component.ts | 21 +++++---------------- src/app/app.module.ts | 24 +++++------------------- src/app/custom/custom.component.css | 0 src/app/custom/custom.component.html | 2 ++ src/app/custom/custom.component.ts | 20 ++++++++++++++++++++ src/app/message.service.ts | 11 +++++++++++ src/app/order-anniversary.service.ts | 18 ------------------ src/app/order-detail.ts | 9 --------- src/app/order-discount.service.ts | 17 ----------------- src/app/order.service.ts | 18 ------------------ 11 files changed, 47 insertions(+), 111 deletions(-) create mode 100644 src/app/custom/custom.component.css create mode 100644 src/app/custom/custom.component.html create mode 100644 src/app/custom/custom.component.ts create mode 100644 src/app/message.service.ts delete mode 100644 src/app/order-anniversary.service.ts delete mode 100644 src/app/order-detail.ts delete mode 100644 src/app/order-discount.service.ts delete mode 100644 src/app/order.service.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index beecf5f..c1d6fcf 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,14 +1,4 @@ - - - - - - - - - - - - - -
單價數量
{{ item.UnitPrice }}{{ item.PurchaseCount }}
總金額{{ total }}
+
+ +

AppComponent

+{{ messageService.message }} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 010340b..a73d73c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,23 +1,12 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; -import { OrderDetail } from './order-detail'; -import { OrderService } from './order.service'; +import { MessageService } from './message.service'; @Component({ selector: 'my-app', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'], + styleUrls: [ './app.component.css' ] }) -export class AppComponent implements OnInit { - total = 0; - - constructor(public orderService: OrderService) {} - - ngOnInit(): void { - this.orderService.details = [ - new OrderDetail({ PurchaseCount: 2, UnitPrice: 200 }), - new OrderDetail({ PurchaseCount: 4, UnitPrice: 50 }), - ]; - this.total = this.orderService.computeTotal(); - } +export class AppComponent { + constructor(public messageService: MessageService) {} } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index dfd34c1..00866cb 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,25 +3,11 @@ import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; -import { OrderService } from './order.service'; -import { OrderAnniversaryService } from './order-anniversary.service'; +import { CustomComponent } from './custom/custom.component'; @NgModule({ - imports: [BrowserModule, FormsModule], - declarations: [AppComponent], - providers: [ - { - provide: OrderService, - useFactory: () => { - const today = new Date(2020, 9, 3); - if (today.getMonth() === 9) { - return new OrderAnniversaryService(); - } else { - return new OrderService(); - } - }, - }, - ], - bootstrap: [AppComponent], + imports: [ BrowserModule, FormsModule ], + declarations: [ AppComponent, CustomComponent ], + bootstrap: [ AppComponent ] }) -export class AppModule {} +export class AppModule { } diff --git a/src/app/custom/custom.component.css b/src/app/custom/custom.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/custom/custom.component.html b/src/app/custom/custom.component.html new file mode 100644 index 0000000..7067616 --- /dev/null +++ b/src/app/custom/custom.component.html @@ -0,0 +1,2 @@ +

CustomComponent

+{{ messageService.message }} diff --git a/src/app/custom/custom.component.ts b/src/app/custom/custom.component.ts new file mode 100644 index 0000000..8585f33 --- /dev/null +++ b/src/app/custom/custom.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit } from '@angular/core'; + +import { MessageService } from '../message.service'; + +@Component({ + selector: 'app-custom', + templateUrl: './custom.component.html', + styleUrls: ['./custom.component.css'], + providers: [ + { + provide: MessageService, + useValue: { message: '這是已經被替換掉的訊息' }, + }, + ], +}) +export class CustomComponent implements OnInit { + constructor(public messageService: MessageService) {} + + ngOnInit() {} +} diff --git a/src/app/message.service.ts b/src/app/message.service.ts new file mode 100644 index 0000000..306aa96 --- /dev/null +++ b/src/app/message.service.ts @@ -0,0 +1,11 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class MessageService { + message = '這是 MessageService 內的訊息' + + constructor() { } + +} diff --git a/src/app/order-anniversary.service.ts b/src/app/order-anniversary.service.ts deleted file mode 100644 index d6ed08b..0000000 --- a/src/app/order-anniversary.service.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Injectable } from '@angular/core'; - -import { OrderDetail } from './order-detail'; - -@Injectable({ - providedIn: 'root', -}) -export class OrderAnniversaryService { - details: OrderDetail[] = []; - - constructor() {} - - computeTotal(): number { - return this.details - .map((d) => d.PurchaseCount * d.UnitPrice * 0.8) - .reduce((act, curr) => act + curr, 0); - } -} diff --git a/src/app/order-detail.ts b/src/app/order-detail.ts deleted file mode 100644 index 885abab..0000000 --- a/src/app/order-detail.ts +++ /dev/null @@ -1,9 +0,0 @@ -export class OrderDetail { - constructor(initData?: Partial) { - Object.assign(this, initData); - } - - PurchaseCount!: number; - - UnitPrice!: number; -} diff --git a/src/app/order-discount.service.ts b/src/app/order-discount.service.ts deleted file mode 100644 index 221e81f..0000000 --- a/src/app/order-discount.service.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Injectable } from '@angular/core'; - -import { OrderDetail } from './order-detail'; - -@Injectable() -export class OrderDiscountService { - details: OrderDetail[] = []; - - constructor() { } - - computeTotal(): number { - const total = this.details - .map((d) => d.PurchaseCount * d.UnitPrice) - .reduce((act, curr) => act + curr, 0); - return total * 0.9; - } -} diff --git a/src/app/order.service.ts b/src/app/order.service.ts deleted file mode 100644 index 6ad3401..0000000 --- a/src/app/order.service.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Injectable } from '@angular/core'; - -import { OrderDetail } from './order-detail'; - -@Injectable({ - providedIn: 'root', -}) -export class OrderService { - details: OrderDetail[] = []; - - constructor() {} - - computeTotal(): number { - return this.details - .map((d) => d.PurchaseCount * d.UnitPrice) - .reduce((act, curr) => act + curr, 0); - } -} From 1d2714650407ba44f0bb3aafbb58925a1e7399bc Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sun, 6 Nov 2022 16:08:46 +0800 Subject: [PATCH 18/20] =?UTF-8?q?string=20Token=20=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E5=AD=97=E4=B8=B2=E4=BD=9C=E7=82=BAInject=20token?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.html | 5 +---- src/app/app.component.ts | 6 ++---- src/app/app.module.ts | 4 ++-- src/app/custom/custom.component.css | 0 src/app/custom/custom.component.html | 2 -- src/app/custom/custom.component.ts | 20 -------------------- src/app/message.service.ts | 11 ----------- 7 files changed, 5 insertions(+), 43 deletions(-) delete mode 100644 src/app/custom/custom.component.css delete mode 100644 src/app/custom/custom.component.html delete mode 100644 src/app/custom/custom.component.ts delete mode 100644 src/app/message.service.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index c1d6fcf..50cc441 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1 @@ -
- -

AppComponent

-{{ messageService.message }} +Loading 圖示位置：{{ loadingPath }} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a73d73c..432045b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,4 @@ -import { Component } from '@angular/core'; - -import { MessageService } from './message.service'; +import { Component, Inject } from '@angular/core'; @Component({ selector: 'my-app', @@ -8,5 +6,5 @@ import { MessageService } from './message.service'; styleUrls: [ './app.component.css' ] }) export class AppComponent { - constructor(public messageService: MessageService) {} + constructor(@Inject('LoadingPath') public loadingPath: string) {} } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 00866cb..a1fcff5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,11 +3,11 @@ import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; -import { CustomComponent } from './custom/custom.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], - declarations: [ AppComponent, CustomComponent ], + declarations: [ AppComponent ], + providers: [{ provide: 'LoadingPath', useValue: 'assets/loading.gif'}], bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/src/app/custom/custom.component.css b/src/app/custom/custom.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/custom/custom.component.html b/src/app/custom/custom.component.html deleted file mode 100644 index 7067616..0000000 --- a/src/app/custom/custom.component.html +++ /dev/null @@ -1,2 +0,0 @@ -

CustomComponent

-{{ messageService.message }} diff --git a/src/app/custom/custom.component.ts b/src/app/custom/custom.component.ts deleted file mode 100644 index 8585f33..0000000 --- a/src/app/custom/custom.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { MessageService } from '../message.service'; - -@Component({ - selector: 'app-custom', - templateUrl: './custom.component.html', - styleUrls: ['./custom.component.css'], - providers: [ - { - provide: MessageService, - useValue: { message: '這是已經被替換掉的訊息' }, - }, - ], -}) -export class CustomComponent implements OnInit { - constructor(public messageService: MessageService) {} - - ngOnInit() {} -} diff --git a/src/app/message.service.ts b/src/app/message.service.ts deleted file mode 100644 index 306aa96..0000000 --- a/src/app/message.service.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable({ - providedIn: 'root' -}) -export class MessageService { - message = '這是 MessageService 內的訊息' - - constructor() { } - -} From c6818ba1e16ece49d1ddf7acd91a7f2faafa8263 Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sun, 6 Nov 2022 16:35:35 +0800 Subject: [PATCH 19/20] =?UTF-8?q?Injection=20Token=20=E5=BB=BA=E7=AB=8BInj?= =?UTF-8?q?ectionToken=E5=9E=8B=E5=88=A5=E8=AE=8A=E6=95=B8=E4=BE=86?= =?UTF-8?q?=E7=94=A2=E7=94=9Ftoken?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.html | 15 ++++++++++++++- src/app/app.component.ts | 22 ++++++++++++++++++---- src/app/app.module.ts | 12 +++++++----- src/app/order-detail.ts | 9 +++++++++ src/app/order.interface.ts | 8 ++++++++ src/app/order.service.ts | 19 +++++++++++++++++++ 6 files changed, 75 insertions(+), 10 deletions(-) create mode 100644 src/app/order-detail.ts create mode 100644 src/app/order.interface.ts create mode 100644 src/app/order.service.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 50cc441..beecf5f 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1,14 @@ -Loading 圖示位置：{{ loadingPath }} + + + + + + + + + + + + + +
單價數量
{{ item.UnitPrice }}{{ item.PurchaseCount }}
總金額{{ total }}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 432045b..16758be 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,24 @@ -import { Component, Inject } from '@angular/core'; +import { Component, Inject, OnInit } from '@angular/core'; + +import { OrderDetail } from './order-detail'; +import { IOrderService, ORDER_SERVICE } from './order.interface'; @Component({ selector: 'my-app', templateUrl: './app.component.html', - styleUrls: [ './app.component.css' ] + styleUrls: ['./app.component.css'], }) -export class AppComponent { - constructor(@Inject('LoadingPath') public loadingPath: string) {} +export class AppComponent implements OnInit { + total = 0; + + //@Inject 注入Service(ORDER_SERVICE) Token + constructor(@Inject(ORDER_SERVICE) public orderService: IOrderService) {} + + ngOnInit(): void { + this.orderService.details = [ + new OrderDetail({ PurchaseCount: 2, UnitPrice: 200 }), + new OrderDetail({ PurchaseCount: 4, UnitPrice: 50 }), + ]; + this.total = this.orderService.computeTotal(); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a1fcff5..2b7d538 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,11 +3,13 @@ import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; +import { ORDER_SERVICE } from './order.interface'; +import { OrderService } from './order.service'; @NgModule({ - imports: [ BrowserModule, FormsModule ], - declarations: [ AppComponent ], - providers: [{ provide: 'LoadingPath', useValue: 'assets/loading.gif'}], - bootstrap: [ AppComponent ] + imports: [BrowserModule, FormsModule], + declarations: [AppComponent], + providers: [{ provide: ORDER_SERVICE, useClass: OrderService }], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/src/app/order-detail.ts b/src/app/order-detail.ts new file mode 100644 index 0000000..885abab --- /dev/null +++ b/src/app/order-detail.ts @@ -0,0 +1,9 @@ +export class OrderDetail { + constructor(initData?: Partial) { + Object.assign(this, initData); + } + + PurchaseCount!: number; + + UnitPrice!: number; +} diff --git a/src/app/order.interface.ts b/src/app/order.interface.ts new file mode 100644 index 0000000..2d38ae0 --- /dev/null +++ b/src/app/order.interface.ts @@ -0,0 +1,8 @@ +import { InjectionToken } from "@angular/core"; +import { OrderDetail } from "./order-detail"; +export const ORDER_SERVICE = new InjectionToken('Order Service'); + +export interface IOrderService { + details: OrderDetail[]; + computeTotal():number; +} diff --git a/src/app/order.service.ts b/src/app/order.service.ts new file mode 100644 index 0000000..24fa7d4 --- /dev/null +++ b/src/app/order.service.ts @@ -0,0 +1,19 @@ +import { Injectable } from '@angular/core'; + +import { OrderDetail } from './order-detail'; +import { IOrderService } from './order.interface'; + +@Injectable({ + providedIn: 'root', +}) +export class OrderService implements IOrderService { + details: OrderDetail[] = []; + + constructor() {} + + computeTotal(): number { + return this.details + .map((d) => d.PurchaseCount * d.UnitPrice) + .reduce((act, curr) => act + curr, 0); + } +} From 5d8ca496052f078bf4563750d3307dc73d034f97 Mon Sep 17 00:00:00 2001 From: HarveyMac Date: Sun, 6 Nov 2022 16:50:49 +0800 Subject: [PATCH 20/20] =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=9B=B8=E5=90=8Ctoken?= =?UTF-8?q?=EF=BC=8C=E6=8C=87=E5=AE=9A=E5=A4=9A=E7=A8=AEprovider?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/a/a.module.ts | 11 +++++++++++ src/app/app.component.html | 16 ++-------------- src/app/app.component.ts | 22 +++++----------------- src/app/app.module.ts | 13 ++++++------- src/app/b/b.module.ts | 11 +++++++++++ src/app/i18n.service.ts | 12 ++++++++++++ src/app/order-detail.ts | 9 --------- src/app/order.interface.ts | 8 -------- src/app/order.service.ts | 19 ------------------- 9 files changed, 47 insertions(+), 74 deletions(-) create mode 100644 src/app/a/a.module.ts create mode 100644 src/app/b/b.module.ts create mode 100644 src/app/i18n.service.ts delete mode 100644 src/app/order-detail.ts delete mode 100644 src/app/order.interface.ts delete mode 100644 src/app/order.service.ts diff --git a/src/app/a/a.module.ts b/src/app/a/a.module.ts new file mode 100644 index 0000000..26c8ddc --- /dev/null +++ b/src/app/a/a.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@NgModule({ + imports: [ + CommonModule + ], + declarations: [], + providers: [{ provide: 'i18nFolder', useValue: 'a-module', multi: true }] +}) +export class AModule { } diff --git a/src/app/app.component.html b/src/app/app.component.html index beecf5f..487c6ae 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,14 +1,2 @@ - - - - - - - - - - - - - -
單價數量
{{ item.UnitPrice }}{{ item.PurchaseCount }}
總金額{{ total }}
+

多個 i18n 資料夾設定

+
{{ i18nService.i18nFolder | json }}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 16758be..92e7f91 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,24 +1,12 @@ -import { Component, Inject, OnInit } from '@angular/core'; +import { Component, VERSION } from '@angular/core'; -import { OrderDetail } from './order-detail'; -import { IOrderService, ORDER_SERVICE } from './order.interface'; +import { I18nService } from './i18n.service'; @Component({ selector: 'my-app', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'], + styleUrls: [ './app.component.css' ] }) -export class AppComponent implements OnInit { - total = 0; - - //@Inject 注入Service(ORDER_SERVICE) Token - constructor(@Inject(ORDER_SERVICE) public orderService: IOrderService) {} - - ngOnInit(): void { - this.orderService.details = [ - new OrderDetail({ PurchaseCount: 2, UnitPrice: 200 }), - new OrderDetail({ PurchaseCount: 4, UnitPrice: 50 }), - ]; - this.total = this.orderService.computeTotal(); - } +export class AppComponent { + constructor(public i18nService: I18nService) {} } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2b7d538..aa21d05 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,13 +3,12 @@ import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; -import { ORDER_SERVICE } from './order.interface'; -import { OrderService } from './order.service'; +import { AModule } from './a/a.module'; +import { BModule } from './b/b.module'; @NgModule({ - imports: [BrowserModule, FormsModule], - declarations: [AppComponent], - providers: [{ provide: ORDER_SERVICE, useClass: OrderService }], - bootstrap: [AppComponent], + imports: [ BrowserModule, FormsModule, AModule, BModule ], + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] }) -export class AppModule {} +export class AppModule { } diff --git a/src/app/b/b.module.ts b/src/app/b/b.module.ts new file mode 100644 index 0000000..301c2ee --- /dev/null +++ b/src/app/b/b.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@NgModule({ + imports: [ + CommonModule + ], + declarations: [], + providers: [{ provide: 'i18nFolder', useValue: 'b-module', multi: true }] +}) +export class BModule { } diff --git a/src/app/i18n.service.ts b/src/app/i18n.service.ts new file mode 100644 index 0000000..5e502ad --- /dev/null +++ b/src/app/i18n.service.ts @@ -0,0 +1,12 @@ +import { Inject, Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root', +}) +export class I18nService { + i18nFolder: string[]; + + constructor(@Inject('i18nFolder') folders: string[]) { + this.i18nFolder = folders.map((folder) => `assets/${folder}`); + } +} diff --git a/src/app/order-detail.ts b/src/app/order-detail.ts deleted file mode 100644 index 885abab..0000000 --- a/src/app/order-detail.ts +++ /dev/null @@ -1,9 +0,0 @@ -export class OrderDetail { - constructor(initData?: Partial) { - Object.assign(this, initData); - } - - PurchaseCount!: number; - - UnitPrice!: number; -} diff --git a/src/app/order.interface.ts b/src/app/order.interface.ts deleted file mode 100644 index 2d38ae0..0000000 --- a/src/app/order.interface.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { InjectionToken } from "@angular/core"; -import { OrderDetail } from "./order-detail"; -export const ORDER_SERVICE = new InjectionToken('Order Service'); - -export interface IOrderService { - details: OrderDetail[]; - computeTotal():number; -} diff --git a/src/app/order.service.ts b/src/app/order.service.ts deleted file mode 100644 index 24fa7d4..0000000 --- a/src/app/order.service.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Injectable } from '@angular/core'; - -import { OrderDetail } from './order-detail'; -import { IOrderService } from './order.interface'; - -@Injectable({ - providedIn: 'root', -}) -export class OrderService implements IOrderService { - details: OrderDetail[] = []; - - constructor() {} - - computeTotal(): number { - return this.details - .map((d) => d.PurchaseCount * d.UnitPrice) - .reduce((act, curr) => act + curr, 0); - } -}