@HostListener 裝飾器

可以用來listen mouseover跟mouseout事件
改變顏色

src/app/app.component.html

@@ -1,5 +1,3 @@
-<button type="button" (click)="onReset()">重設工作事項</button>
-<app-task
-*ngFor="let task of tasks; trackBy: trackByItems"
-[task]="task"
-></app-task>
+
+<p appOverHighlight>當游標移到這裡，會改變文字顏色</p>
+<!-- 將此段套用directive OverHighlight-->

src/app/app.component.spec.ts

@@ -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!');
-  });
-});

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' }),
-    ];
-  }
-}
+

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 { }

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');
+  }
+
+}

src/app/task.ts

@@ -1,9 +0,0 @@
-export class Task {
-  constructor(initData?: Partial<Task>) {
-    Object.assign(this, initData);
-  }
-
-  TaskSn!: string;
-  TaskName!: string;
-  State!: string;
-}

src/app/task/task.component.css

@@ -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;
-}

src/app/task/task.component.html

@@ -1,2 +0,0 @@
-<span>{{ task.TaskSn }} </span>
-<span>{{task.TaskName}}</span>

src/app/task/task.component.ts

@@ -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;
-}