feat: search use query param

Change-Id: Id321b447626d820614c8cb8d644cce5c4da9028d

src/web/src/app/app.component.ts

@@ -24,7 +24,8 @@ export class AppComponent implements OnInit {
     private searchService: SearchService,
     private offsetService: OffsetService,
   ) {}
-  @ViewChild('$context') contentRef: ElementRef<HTMLDivElement>;
+  @ViewChild('$context')
+  contentRef: ElementRef<HTMLDivElement>;
 
   ngOnInit(): void {
     this.scrollHistory();
@@ -68,7 +69,9 @@ export class AppComponent implements OnInit {
 
     this.searchService.onOpenAppList().subscribe(result => {
       console.log('open app list', result.appNameList);
-      this.router.navigate(['search', { keyword: result.keyword, apps: result.appNameList }]);
+      this.router.navigate(['search'], {
+        queryParams: { keyword: result.keyword, apps: result.appNameList },
+      });
     });
   }
   screenshotPreview() {

src/web/src/app/components/search/search.component.ts

@@ -26,16 +26,13 @@ export class SearchComponent implements OnInit {
   apps$: Observable<App[]>;
 
   ngOnInit() {
-    this.keyword$ = this.route.paramMap.pipe(map(param => param.get('keyword')));
-    this.title$ = this.keyword$.pipe(map(keyword => `"${truncate(keyword, { length: 16 })}"`));
+    this.title$ = this.route.queryParamMap.pipe(
+      map(param => `"${truncate(param.get('keyword'), { length: 16 })}"`),
+    );
 
-    this.apps$ = this.route.paramMap.pipe(
+    this.apps$ = this.route.queryParamMap.pipe(
       flatMap(param => {
-        // angular 'getAll' bug /~https://github.com/angular/angular/issues/19179
-        const appNameList = param
-          .getAll('apps')
-          .map(apps => apps.split(','))
-          .reduce((a, b) => [...a, ...b]);
+        const appNameList = param.getAll('apps');
         return this.appService.getApps(appNameList);
       }),
     );