From e0ad72d8a35323112a41ceeec2177264efacc8e0 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sun, 14 Jun 2020 22:21:32 +0200 Subject: [PATCH] refactor(google-maps): use directive for map marker The Google Maps marker is currently marked as a component, but it isn't using any component features. These changes turn it into a directive since it also allows consumers to apply it on elements that are components. --- src/dev-app/google-map/google-map-demo.html | 7 +++-- src/google-maps/map-marker/map-marker.spec.ts | 27 +++++++++---------- src/google-maps/map-marker/map-marker.ts | 16 ++--------- .../google-maps/google-maps.d.ts | 2 +- 4 files changed, 21 insertions(+), 31 deletions(-) diff --git a/src/dev-app/google-map/google-map-demo.html b/src/dev-app/google-map/google-map-demo.html index 68783e384dd4..6b739d10e5d8 100644 --- a/src/dev-app/google-map/google-map-demo.html +++ b/src/dev-app/google-map/google-map-demo.html @@ -7,8 +7,11 @@ (mapMousemove)="handleMove($event)" (mapRightclick)="handleRightclick()" [mapTypeId]="mapTypeId"> - - + { createMarkerConstructorSpy(markerSpy).and.callThrough(); const fixture = TestBed.createComponent(TestApp); - const markerComponent = fixture.debugElement.query(By.directive(MapMarker)).componentInstance; fixture.detectChanges(); + const marker = fixture.componentInstance.marker; markerSpy.getAnimation.and.returnValue(null); - expect(markerComponent.getAnimation()).toBe(null); + expect(marker.getAnimation()).toBe(null); markerSpy.getClickable.and.returnValue(true); - expect(markerComponent.getClickable()).toBe(true); + expect(marker.getClickable()).toBe(true); markerSpy.getCursor.and.returnValue('cursor'); - expect(markerComponent.getCursor()).toBe('cursor'); + expect(marker.getCursor()).toBe('cursor'); markerSpy.getDraggable.and.returnValue(true); - expect(markerComponent.getDraggable()).toBe(true); + expect(marker.getDraggable()).toBe(true); markerSpy.getIcon.and.returnValue('icon'); - expect(markerComponent.getIcon()).toBe('icon'); + expect(marker.getIcon()).toBe('icon'); markerSpy.getLabel.and.returnValue(null); - expect(markerComponent.getLabel()).toBe(null); + expect(marker.getLabel()).toBe(null); markerSpy.getOpacity.and.returnValue(5); - expect(markerComponent.getOpacity()).toBe(5); + expect(marker.getOpacity()).toBe(5); markerSpy.getPosition.and.returnValue(null); - expect(markerComponent.getPosition()).toEqual(null); + expect(marker.getPosition()).toEqual(null); markerSpy.getShape.and.returnValue(null); - expect(markerComponent.getShape()).toBe(null); + expect(marker.getShape()).toBe(null); markerSpy.getTitle.and.returnValue('title'); - expect(markerComponent.getTitle()).toBe('title'); + expect(marker.getTitle()).toBe('title'); markerSpy.getVisible.and.returnValue(true); - expect(markerComponent.getVisible()).toBe(true); + expect(marker.getVisible()).toBe(true); markerSpy.getZIndex.and.returnValue(2); - expect(markerComponent.getZIndex()).toBe(2); + expect(marker.getZIndex()).toBe(2); }); it('initializes marker event handlers', () => { diff --git a/src/google-maps/map-marker/map-marker.ts b/src/google-maps/map-marker/map-marker.ts index 8e33d6731934..86fe4138bd83 100644 --- a/src/google-maps/map-marker/map-marker.ts +++ b/src/google-maps/map-marker/map-marker.ts @@ -9,16 +9,7 @@ // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265 /// -import { - ChangeDetectionStrategy, - Component, - Input, - OnDestroy, - OnInit, - Output, - ViewEncapsulation, - NgZone -} from '@angular/core'; +import {Input, OnDestroy, OnInit, Output, NgZone, Directive} from '@angular/core'; import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs'; import {map, take, takeUntil} from 'rxjs/operators'; @@ -39,12 +30,9 @@ export const DEFAULT_MARKER_OPTIONS = { * * See developers.google.com/maps/documentation/javascript/reference/marker */ -@Component({ +@Directive({ selector: 'map-marker', exportAs: 'mapMarker', - template: '', - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, }) export class MapMarker implements OnInit, OnDestroy, MapAnchorPoint { private _eventManager = new MapEventManager(this._ngZone); diff --git a/tools/public_api_guard/google-maps/google-maps.d.ts b/tools/public_api_guard/google-maps/google-maps.d.ts index 27dc742e96df..9ff8d841dd06 100644 --- a/tools/public_api_guard/google-maps/google-maps.d.ts +++ b/tools/public_api_guard/google-maps/google-maps.d.ts @@ -174,7 +174,7 @@ export declare class MapMarker implements OnInit, OnDestroy, MapAnchorPoint { getZIndex(): number | null; ngOnDestroy(): void; ngOnInit(): void; - static ɵcmp: i0.ɵɵComponentDefWithMeta; + static ɵdir: i0.ɵɵDirectiveDefWithMeta; static ɵfac: i0.ɵɵFactoryDef; }