feat: abstract classes and destroy subscriptions

apps/NwaifuAnime/src/app/components/detail/detail.component.html

@@ -10,20 +10,29 @@
       </summary>
       <div class="flex flex-col items-center pb-16">
         @for (chapter of chapters.data; track $index) {
-          <button
-            (click)="goToReader(chapter.number, chapter.volume)"
+          <a
+            routerLink="/reader"
+            [queryParams]="{
+              url: detail_item.slug_url,
+              chapter: chapter.number,
+              volume: chapter.volume,
+            }"
             [title]="chapter.name"
             class="p-3 text-white bg-slate-600 w-[300px] mt-3 rounded-lg"
           >
             <h3>
               <strong>{{ chapter.number }}.</strong> {{ chapter.name || "Нет названия" }}
             </h3>
-          </button>
+          </a>
         }
       </div>
     </details>
-    <button class="p-3 text-white bg-slate-600 w-[300px] mt-5 rounded-lg" (click)="goToReader()">
+    <a
+      routerLink="/reader"
+      class="p-3 text-white bg-slate-600 w-[300px] mt-5 rounded-lg text-center"
+      [queryParams]="{ url: detail_item.slug_url, volume: 1, chapter: 1 }"
+    >
       Читать
-    </button>
+    </a>
   }
 </div>

apps/NwaifuAnime/src/app/components/detail/detail.component.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from "@angular/common";
-import { AfterViewInit, Component } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
+import { AfterViewInit, Component, OnDestroy } from "@angular/core";
+import { ActivatedRoute, Router, RouterLink } from "@angular/router";
+import { Subject, takeUntil } from "rxjs";
 import { IRulibChaptersResult } from "../../services/parsers/rulib/rulib.chapters.dto";
 import { Data } from "../../services/parsers/rulib/rulib.detail.dto";
 import { SearchService } from "../../services/search.service";
@@ -10,11 +11,12 @@ import { SearchService } from "../../services/search.service";
   templateUrl: "./detail.component.html",
   styleUrls: ["./detail.component.less"],
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, RouterLink],
 })
-export class DetailComponent implements AfterViewInit {
+export class DetailComponent implements AfterViewInit, OnDestroy {
   detail_item: Data | null = null;
   chapters: IRulibChaptersResult = { data: [] };
+  private destroy$ = new Subject<void>();
   constructor(
     private route: ActivatedRoute,
     private searchService: SearchService,
@@ -22,17 +24,23 @@ export class DetailComponent implements AfterViewInit {
   ) {}
 
   private getDetails(url: string) {
-    this.searchService.getDetails(url).subscribe((data) => {
-      this.detail_item = data.data;
-    });
-    this.searchService.getChapters(url).subscribe((data) => {
-      this.chapters = data;
-      console.log(data);
-    });
+    this.searchService
+      .getDetails(url)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((data) => {
+        this.detail_item = data.data;
+      });
+    this.searchService
+      .getChapters(url)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((data) => {
+        this.chapters = data;
+        console.log(data);
+      });
   }
 
   ngAfterViewInit(): void {
-    this.route.queryParams.subscribe((params) => {
+    this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
       const url = params["url"];
       if (url) {
         this.getDetails(url);
@@ -42,14 +50,8 @@ export class DetailComponent implements AfterViewInit {
     });
   }
 
-  goToReader(chapter: string = "1", volume: string = "1") {
-    console.log(chapter, volume);
-    this.router.navigate(["/", "reader"], {
-      queryParams: {
-        url: this.detail_item?.slug_url,
-        chapter: +chapter,
-        volume: +volume,
-      },
-    });
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }