feat: move comments

src/app/about/about.component.html

@@ -6,6 +6,7 @@
     <br />所以用了最近剛學會的 python 搜集了一下資料，
     歷屆主題搜尋器因此而誕生囉。
   </p>
+
   <p class="text-lg font-bold pt-6">使用技術：</p>
   <ul class="mt-1">
     <li><a href="https://angular.tw/" target="_black">Angular</a></li>
@@ -15,6 +16,5 @@
     <li>Python 資料抓取</li>
   </ul>
 </div>
-<hr class="my-8 text-neutral-200 w-full" />
-<p class="text-lg">有任何想法與建議歡迎留言給我哦！</p>
-<div class="w-full" id="comments"></div>
+<br /><br /><br />
+<p class="w-full text-right">by 2022 write</p>

src/app/about/about.component.ts

@@ -1,43 +1,8 @@
-import { DOCUMENT } from '@angular/common';
-import { Component, Inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';
-import { Subject, takeUntil } from 'rxjs';
-import { AppService } from '../app.service';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-about',
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.scss'],
 })
-export class AboutComponent implements OnInit, OnDestroy {
-  private onDestroy$: Subject<boolean> = new Subject<boolean>();
-  constructor(
-    public appService: AppService,
-    @Inject(DOCUMENT) private document: Document,
-    private renderer: Renderer2
-  ) {}
-
-  ngOnInit(): void {
-    const script = this.renderer.createElement('script');
-
-    this.appService.theme$
-      .pipe(takeUntil(this.onDestroy$))
-      .subscribe((theme) => {
-        script.type = 'text/javascript';
-        script.src = 'https://utteranc.es/client.js';
-        script.setAttribute('repo', 'mtwmt/ironman');
-        script.setAttribute('issue-term', 'pathname');
-        script.setAttribute('theme', !theme ? 'github-light' : 'github-dark');
-        script.setAttribute('crossorigin', 'anonymous');
-        script.text = ``;
-        this.renderer.appendChild(
-          this.document.querySelector('#comments'),
-          script
-        );
-      });
-  }
-
-  ngOnDestroy(): void {
-    this.onDestroy$.next(false);
-    this.onDestroy$.complete();
-  }
-}
+export class AboutComponent {}

src/app/comments/comments.component.html

@@ -0,0 +1,3 @@
+
+<p class="text-center text-lg">有任何想法與建議歡迎留言給我哦！</p>
+<div class="w-full" id="comments"></div>

src/app/comments/comments.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommentsComponent } from './comments.component';
+
+describe('CommentsComponent', () => {
+  let component: CommentsComponent;
+  let fixture: ComponentFixture<CommentsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CommentsComponent]
+    });
+    fixture = TestBed.createComponent(CommentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/comments/comments.component.ts

@@ -0,0 +1,45 @@
+import { DOCUMENT } from '@angular/common';
+import {
+  Component,
+  DestroyRef,
+  Inject,
+  OnInit,
+  Renderer2,
+  inject,
+} from '@angular/core';
+import { AppService } from '../app.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Component({
+  selector: 'app-comments',
+  templateUrl: './comments.component.html',
+  styleUrls: ['./comments.component.scss'],
+})
+export class CommentsComponent implements OnInit {
+  destroyRef = inject(DestroyRef);
+
+  constructor(
+    public appService: AppService,
+    @Inject(DOCUMENT) private document: Document,
+    private renderer: Renderer2
+  ) {}
+
+  ngOnInit(): void {
+    const script = this.renderer.createElement('script');
+    this.appService.theme$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((theme) => {
+        script.type = 'text/javascript';
+        script.src = 'https://utteranc.es/client.js';
+        script.setAttribute('repo', 'mtwmt/ironman');
+        script.setAttribute('issue-term', 'pathname');
+        script.setAttribute('theme', !theme ? 'github-light' : 'github-dark');
+        script.setAttribute('crossorigin', 'anonymous');
+        script.text = ``;
+        this.renderer.appendChild(
+          this.document.querySelector('#comments'),
+          script
+        );
+      });
+  }
+}

src/app/ironman/ironman.component.html

@@ -28,4 +28,6 @@ <h1 class="text-3xl leading-loose">IT 鐵人賽歷屆主題搜尋</h1>
       </li>
     </ul>
   </nav>
+  <hr class="my-8 text-neutral-200 w-full" />
+  <app-comments class="w-full"></app-comments>
 </ng-container>

src/app/ironman/ironman.module.ts

@@ -10,10 +10,16 @@ import { fab } from '@fortawesome/free-brands-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { SearchComponent } from './search/search.component';
+import { CommentsComponent } from '../comments/comments.component';
 
 
 @NgModule({
-  declarations: [IronmanComponent, ListComponent, SearchComponent],
+  declarations: [
+    IronmanComponent,
+    ListComponent,
+    SearchComponent,
+    CommentsComponent,
+  ],
   imports: [
     CommonModule,
     FormsModule,

src/app/ironman/list/list.component.ts

@@ -1,17 +1,19 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, DestroyRef, OnDestroy, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Observable, combineLatest, Subject } from 'rxjs';
 import { map, takeUntil, distinctUntilChanged } from 'rxjs/operators';
 import { IronmanStoreService } from '../ironman-store.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-list',
   templateUrl: './list.component.html',
   styleUrls: ['./list.component.scss'],
 })
-export class ListComponent implements OnInit, OnDestroy {
+export class ListComponent implements OnInit {
+  destroyRef = inject(DestroyRef);
+
   th!: string;
-  private onDestroy$: Subject<boolean> = new Subject<boolean>();
 
   th$: Observable<string>;
   key$: Observable<string>;
@@ -43,17 +45,14 @@ export class ListComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     combineLatest([this.th$, this.category$, this.key$])
-      .pipe(takeUntil(this.onDestroy$))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(([th, category, key]) => {
         this.th = th;
         this.ironmanStoreService.filterQuery(key, th, category);
       });
   }
 
-  ngOnDestroy(): void {
-    this.onDestroy$.next(false);
-    this.onDestroy$.complete();
-  }
+
 
   removeCate() {
     this.router.navigate(['list', this.th], {