demo 手写高德的搜索框逻辑.方便移植至科达

src/app/app.component.ts

@@ -4,7 +4,7 @@ import { Data } from './interface'
 import { Router, ActivatedRoute } from '@angular/router'
 import { CacheTokenService } from './http-interceptors/cache-token.service'//引入服务
 import { MaskLayerService } from './mask-layer.service';
-
+import * as global from 'globals';
 
 
 @Component({
@@ -15,7 +15,7 @@ import { MaskLayerService } from './mask-layer.service';
 export class AppComponent {
 
     constructor(private maskLayerService: MaskLayerService, private http: HttpClient, private router: Router, public token: CacheTokenService, private injector: Injector) {
-    window.injector = injector;
+        global.injector = injector;
     }
 
     isMaskLayerShow: boolean = false
@@ -44,11 +44,11 @@ export class AppComponent {
 
             let meta = document.createElement('meta');
 
-          meta.content=content;
+            meta.content = content;
 
-          meta.name=name;
+            meta.name = name;
 
-          document.getElementsByTagName('head')[0].appendChild(meta);
+            document.getElementsByTagName('head')[0].appendChild(meta);
 
         }
         if (document.documentElement.clientWidth < 800) {

src/app/app.module.ts

@@ -24,6 +24,7 @@ import { DataCollectionModule } from './data-collection/data-collection.module';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { TestComponent } from './test/test.component';
 import { ExternalLinksPlanComponent } from './external-links-plan/external-links-plan.component';
+import { SearchDownList } from '../modules/map/declare/component/SearchDownListPlugins/SearchDownList';
 
 @NgModule({
     declarations: [
@@ -31,7 +32,8 @@ import { ExternalLinksPlanComponent } from './external-links-plan/external-links
         HomeComponent,
         MTokenK1Component,
         TestComponent,
-    ExternalLinksPlanComponent
+        ExternalLinksPlanComponent,
+        SearchDownList
     ],
     imports: [
         BrowserModule,

src/app/pages/login/login.component.ts

@@ -7,7 +7,7 @@ import { MatSnackBar,MatSnackBarConfig } from '@angular/material/snack-bar';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { SearchService } from '@src/app/searchComponent.service';
 import { SearchDownList } from '@src/modules/map/declare/component/SearchDownListPlugins/SearchDownList';
-
+import * as global from 'globals';
 
 
 @Component({
@@ -19,7 +19,6 @@ export class LoginComponent implements OnInit {
 
     constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public token: CacheTokenService, public snackBar: MatSnackBar, public dialog: MatDialog) {
 
-    window.injector.get<SearchService>(SearchService).appendComponentToBody(SearchDownList);
     }
 
     ngOnInit() {
@@ -31,7 +30,8 @@ export class LoginComponent implements OnInit {
     onSubmit(e) {
         this.http.post('/api/Account/SignIn', {
             name: e.name,
-      password: e.password}).subscribe( (data: Data) => { 
+            password: e.password
+        }).subscribe((data: Data) => {
             sessionStorage.setItem("level", data.level);
             sessionStorage.setItem("token", data.token);
             sessionStorage.setItem("refreshToken", data.refreshToken);
@@ -66,7 +66,8 @@ export class LoginComponent implements OnInit {
             if (e.notlogin) { //7天免登录时
                 localStorage.setItem("isnologin", "true")
                 localStorage.setItem("token", data.token)
-          localStorage.setItem("refreshToken",data.refreshToken) }
+                localStorage.setItem("refreshToken", data.refreshToken)
+            }
             //调用服务中的function刷新token
             this.token.startUp()
         },
@@ -93,7 +94,8 @@ export class LoginComponent implements OnInit {
             let refreshToken = localStorage.getItem("refreshToken");
             this.http.post('/api/Account/RefreshToken', {
                 token: token,
-        refreshToken: refreshToken}).subscribe((data:any)=>{
+                refreshToken: refreshToken
+            }).subscribe((data: any) => {
                 sessionStorage.setItem("level", data.level);
                 sessionStorage.setItem("token", data.token);
                 sessionStorage.setItem("refreshToken", data.refreshToken);
@@ -144,8 +146,7 @@ export class ChangepasswordComponent2 implements OnInit {
             config.verticalPosition = 'top';
             config.duration = 3000
             this.snackBar.open('密码修改成功', '确定', config);
-    },(err) =>
+        }, (err) => { this.errmsg = err }
-    {this.errmsg = err}
         )
     }
 

src/app/searchComponent.service.ts

@@ -7,10 +7,9 @@ export class SearchService {
     constructor(private componentFactoryResolver: ComponentFactoryResolver, private applicationRef: ApplicationRef, private injector: Injector,) { }
 
     //angular 动态组件
-    appendComponentToBody(component: any) {
+    appendComponentToBody<T>(component: any): ComponentRef<T> {
         //create a component reference
         const componentRef = this.componentFactoryResolver.resolveComponentFactory(component).create(this.injector);
-    
         // attach component to the appRef so that so that it will be dirty checked.
         this.applicationRef.attachView(componentRef.hostView);
 
@@ -19,7 +18,7 @@ export class SearchService {
 
         document.body.appendChild(domElem);
 
-        return componentRef;
+        return componentRef as ComponentRef<T>;
     }
 
     removeComponentFromBody(componentRef: ComponentRef<any>) {

src/global.d.ts

@@ -1,5 +0,0 @@
-import { Injector } from "@angular/core";
-
-export declare interface Window {
-    injector: Injector
-  }

src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.ts

@@ -20,10 +20,14 @@ export class SearchDownList implements OnInit {
     private clickHandler: ClickHandler;
     ngOnInit(): void {
     }
-
+    setClickHander(handler: ClickHandler) {
-    init(elementId:string,clickCallback:ClickHandler):void{
+        this.clickHandler = handler;
+    }
+    clearClickHander() {
+        this.clearClickHander = null;
+    }
+    init(elementId: string): void {
         this.$input = document.getElementById(elementId);
-        this.clickHandler = clickCallback;
         //this.addDOMEvent();
     }
     // input 添加监听事件
@@ -35,11 +39,17 @@ export class SearchDownList implements OnInit {
     }
 
     select(e) {
-        this.clickHandler(e);
+        this.clearClickHander && this.clickHandler(e);
         this.searchList = [];
     }
 
     watch() {
         //TODO:修改leftCss ,topCss
     }
+
+    testAddData() {
+        this.searchList.push({
+            name: "asfasdfasdf"
+        } as AutocompleteSelect);
+    }
 }

src/modules/map/declare/gaode-map.ts

@@ -1,5 +1,8 @@
-import { HtmlRender, ICircle, IIcon, IIconOptions, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IMouseTool, IInfoWindow, IPixel, IRenderClusterMarker, ISelf, ISize, PixelRender, ITileLayer, IDriving, IDrivingOptions, IAutocomplete, IPlaceSearch, AutocompleteSearchCallback, AutocompleteSelectCallback, PlaceSearchCallback } from './map'
+import { HtmlRender, ICircle, IIcon, IIconOptions, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IMouseTool, IInfoWindow, IPixel, IRenderClusterMarker, ISelf, ISize, PixelRender, ITileLayer, IDriving, IDrivingOptions, IAutocomplete, IPlaceSearch, AutocompleteSearchCallback, AutocompleteSelectCallback, PlaceSearchCallback, AutocompleteSearch } from './map'
 import MapTools from './map-tools';
+import * as global from 'globals';
+import { SearchService } from '@src/app/searchComponent.service';
+import { SearchDownList } from './component/SearchDownListPlugins/SearchDownList';
 declare var AMap: any;
 declare var AMapUI: any;
 
@@ -376,20 +379,36 @@ export class GaodeDriving extends GaodeBasic implements IDriving {
 
 export class GaodeAutocomplete extends GaodeBasic implements IAutocomplete {
     private component: any
+    private searchDownList: SearchDownList
     constructor(options: any, component: any) {
         super();
         this.component = component
         AMap.plugin('AMap.AutoComplete', () => {
             this.self = new AMap.Autocomplete(options)
         })
+
+        this.searchDownList = global.injector.get<SearchService>(SearchService).appendComponentToBody(SearchDownList).instance;
+        this.searchDownList.init(options.input);
+
+        this.self.on('complete', (e) => {
+            console.log('search complete', e);
+            this.searchDownList.searchList = e.tips || [];
+        })
     }
     on(eventName: string, callback: AutocompleteSelectCallback) {
-        return this.self.on(eventName, (event)=>{
+        this.searchDownList.setClickHander(e => {
-            callback.call(this.component,event)
+            alert(e.name);
-        })
+            callback(e);
+        });
+        //$().addEventListener
+        // return this.self.on(eventName, (event) => {
+        //     console.log('on event', event)
+        //     callback.call(this.component, event)
+        // })
     }
     search(address: string, callback: AutocompleteSearchCallback) {
-        return this.self.search(address,(status,result)=>{
+        return this.self.search(address, (status, result: AutocompleteSearch) => {
+            this.searchDownList.searchList = result.tips || [];
             callback.call(this.component, status, result)
         })
     }

src/modules/map/declare/keda-map.ts

@@ -3,6 +3,7 @@ import * as ObjectID from 'bson-objectid';
 import { SearchDownList } from './component/SearchDownListPlugins/SearchDownList';
 import { ApplicationRef, ComponentFactoryResolver, Injector, ReflectiveInjector } from '@angular/core';
 import { SearchService } from '@src/app/searchComponent.service';
+import * as global from 'globals';
 declare var KMap: any;
 
 class KedaBasic implements ISelf {