fix(template): use navigateByUrl when click search result item path i…

…s inernal route #OSP-253 #350
docgeni · Apr 24, 2022 · 152e6f7 · 152e6f7
1 parent a2954e7
commit 152e6f7
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/packages/template/src/services/search.service.ts b/packages/template/src/services/search.service.ts
@@ -4,20 +4,20 @@ import { DOCUMENT } from '@angular/common';
 import { fromEvent, Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
 
-interface PageInfo {
+export interface SearchPageInfo {
     title: string;
     id: string;
     path: string;
-    parent?: PageInfo;
+    parent?: SearchPageInfo;
 }
 
 @Injectable({ providedIn: 'root' })
 export class SearchService {
-    private allPages: PageInfo[] = [];
+    private allPages: SearchPageInfo[] = [];
 
     private destroyed$ = new Subject();
 
-    public result: PageInfo[] = [];
+    public result: SearchPageInfo[] = [];
 
     public get hasAlgolia() {
         return !!(this.global.config.algolia && this.global.config.algolia.apiKey && this.global.config.algolia.indexName);
@@ -126,7 +126,7 @@ export class SearchService {
         }
     }
 
-    public trackByFn(index: number, item: PageInfo) {
+    public trackByFn(index: number, item: SearchPageInfo) {
         return item.id || index;
     }
 }
diff --git a/packages/template/src/shared/search/search.component.html b/packages/template/src/shared/search/search.component.html
@@ -15,9 +15,14 @@
     [class.is-searching]="hasSearchText && isFocus"
     [class.result-empty]="searchService.result?.length === 0"
   >
-    <a class="search-result" *ngFor="let result of searchService.result; trackBy: searchService.trackByFn" [href]="result.path">
-      <ng-container *ngIf="result.parent"> {{ result.parent?.title }} &gt; </ng-container>
-      <span [innerHtml]="searchText | highlight: result.title"></span>
+    <a
+      class="search-result"
+      *ngFor="let item of searchService.result; trackBy: searchService.trackByFn"
+      [href]="item.path"
+      (click)="toRoute($event, item)"
+    >
+      <ng-container *ngIf="item.parent"> {{ item.parent?.title }} &gt; </ng-container>
+      <span [innerHtml]="searchText | highlight: item.title"></span>
     </a>
     <ng-container *ngIf="hasSearchText && searchService.result.length === 0">
       <dg-icon class="empty-icon" iconName="empty"></dg-icon>

diff --git a/packages/template/src/shared/search/search.component.ts b/packages/template/src/shared/search/search.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, AfterViewInit } from '@angular/core';
-import { SearchService } from '../../services/search.service';
+import { Router } from '@angular/router';
+import { SearchPageInfo, SearchService } from '../../services/search.service';
 
 @Component({
     selector: 'dg-search',
@@ -12,7 +13,7 @@ export class SearchComponent implements OnInit, AfterViewInit {
 
     public hasSearchText: boolean;
 
-    constructor(public searchService: SearchService) {}
+    constructor(public searchService: SearchService, private router: Router) {}
 
     ngOnInit(): void {}
 
@@ -39,4 +40,11 @@ export class SearchComponent implements OnInit, AfterViewInit {
             this.hasSearchText = !!this.searchText?.trim();
         }, 200);
     }
+
+    toRoute($event: Event, item: SearchPageInfo) {
+        if (!item.path.startsWith('http')) {
+            $event.preventDefault();
+            this.router.navigateByUrl(item.path);
+        }
+    }
 }