Angular共享组件实现及地图功能子路由设计问询

Hey there! Let's break down how to get your Angular Google Maps app up and running with proper routing and reusable shared components.

1. Complete Your Child Routing Configuration #

First, let's fix and expand your existing route setup to match the operations you mentioned (drag-to-locate, add marker, edit marker). Here's a full, working example:

export const routes: Routes = [
  // ... other parent routes
  {
    path: 'location',
    component: LocationComponent,
    children: [
      { path: '', redirectTo: 'overview', pathMatch: 'full' },
      { path: 'overview', component: LocationOverviewComponent }, // Shows map + marker list
      { path: 'drag-locate', component: MapDragLocateComponent }, // Handle drag-to-set location
      { path: 'add-marker', component: AddMarkerComponent }, // Add new marker form
      { path: 'edit-marker/:markerId', component: EditMarkerComponent } // Edit existing marker (with ID param)
    ]
  }
];

Quick Notes on This Setup: #

• The LocationComponent acts as a parent shell (you can add a sidebar or navigation here to switch between child routes)
• The :markerId param in edit-marker lets you pass the unique ID of the marker you want to edit, which you can access via ActivatedRoute in the component
• Each child route maps to a dedicated component for that specific operation, keeping your code clean and focused

2. Implementing Shared Components in Angular #

Since multiple parts of your app will interact with Google Maps (e.g., overview, drag-locate, add/edit marker), creating shared components will save you tons of duplicate code. Here are the most common approaches:

Option 1: Create a Shared Module #

First, generate a shared module to house all your reusable components, directives, and pipes. This makes it easy to import them into any feature module that needs them.

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GoogleMapComponent } from './google-map/google-map.component';
import { MarkerFormComponent } from './marker-form/marker-form.component';
import { ReactiveFormsModule } from '@angular/forms'; // For the marker form

@NgModule({
  declarations: [GoogleMapComponent, MarkerFormComponent],
  imports: [CommonModule, ReactiveFormsModule],
  exports: [GoogleMapComponent, MarkerFormComponent] // Export so other modules can use them
})
export class SharedModule { }

Option 2: Shared Google Map Component #

Wrap the Google Map API logic into a single reusable component that you can use across all your routes. This component can handle map initialization, drag events, marker management, and communicate with parent components via inputs/outputs.

// google-map.component.ts
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { GoogleMap, MapMarker } from '@angular/google-maps';

@Component({
  selector: 'app-google-map',
  template: `
    <google-map 
      [center]="mapCenter" 
      [zoom]="zoom"
      (mapDragEnd)="onMapDragEnd($event)"
      (mapClick)="onMapClick($event)"
    >
      <map-marker 
        *ngFor="let marker of markers"
        [position]="marker.position"
        (mapClick)="onMarkerClick(marker)"
      ></map-marker>
    </google-map>
  `
})
export class GoogleMapComponent implements OnInit {
  @Input() mapCenter: google.maps.LatLngLiteral = { lat: 0, lng: 0 };
  @Input() zoom = 12;
  @Input() markers: { id: string, position: google.maps.LatLngLiteral }[] = [];
  
  @Output() locationDragged = new EventEmitter<google.maps.LatLngLiteral>();
  @Output() mapClicked = new EventEmitter<google.maps.LatLngLiteral>();
  @Output() markerClicked = new EventEmitter<{ id: string, position: google.maps.LatLngLiteral }>();

  ngOnInit(): void {
    // Initialize any Google Map API setup here if needed
  }

  onMapDragEnd(event: google.maps.MapMouseEvent): void {
    if (event.latLng) {
      this.locationDragged.emit({
        lat: event.latLng.lat(),
        lng: event.latLng.lng()
      });
    }
  }

  onMapClick(event: google.maps.MapMouseEvent): void {
    if (event.latLng) {
      this.mapClicked.emit({
        lat: event.latLng.lat(),
        lng: event.latLng.lng()
      });
    }
  }

  onMarkerClick(marker: { id: string, position: google.maps.LatLngLiteral }): void {
    this.markerClicked.emit(marker);
  }
}

Now you can use this component in any of your route components like this:

<!-- location-overview.component.html -->
<app-google-map 
  [mapCenter]="currentCenter"
  [markers]="allMarkers"
  (markerClicked)="navigateToEditMarker($event.id)"
></app-google-map>

Option 3: Shared Marker Form Component #

Create a single form component that works for both adding and editing markers. Use @Input() to pass an existing marker for editing, and @Output() to emit the submitted form data.

// marker-form.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-marker-form',
  template: `
    <form [formGroup]="markerForm" (ngSubmit)="onSubmit()">
      <input formControlName="title" placeholder="Marker Title">
      <input formControlName="description" placeholder="Marker Description">
      <button type="submit">{{ isEditing ? 'Update Marker' : 'Add Marker' }}</button>
    </form>
  `
})
export class MarkerFormComponent {
  @Input() set markerData(data: { id?: string, title?: string, description?: string }) {
    if (data) {
      this.isEditing = true;
      this.markerForm.patchValue(data);
    } else {
      this.isEditing = false;
      this.markerForm.reset();
    }
  }
  
  @Output() formSubmitted = new EventEmitter<{ id?: string, title: string, description: string }>();

  markerForm: FormGroup;
  isEditing = false;

  constructor(private fb: FormBuilder) {
    this.markerForm = this.fb.group({
      id: [''],
      title: [''],
      description: ['']
    });
  }

  onSubmit(): void {
    if (this.markerForm.valid) {
      this.formSubmitted.emit(this.markerForm.value);
    }
  }
}

Use it in AddMarkerComponent:

<!-- add-marker.component.html -->
<app-marker-form (formSubmitted)="addNewMarker($event)"></app-marker-form>

Use it in EditMarkerComponent:

// edit-marker.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MarkerService } from '../services/marker.service';

@Component({
  template: `
    <app-marker-form 
      [markerData]="currentMarker"
      (formSubmitted)="updateMarker($event)"
    ></app-marker-form>
  `
})
export class EditMarkerComponent implements OnInit {
  currentMarker: { id: string, title: string, description: string } | null = null;

  constructor(
    private route: ActivatedRoute,
    private markerService: MarkerService
  ) {}

  ngOnInit(): void {
    const markerId = this.route.snapshot.paramMap.get('markerId');
    if (markerId) {
      this.currentMarker = this.markerService.getMarkerById(markerId);
    }
  }

  updateMarker(markerData: { id?: string, title: string, description: string }): void {
    // Call service to update the marker
  }
}

Bonus: Shared State Management with a Service #

For global state like the current map center, selected marker, or list of markers, create a shared service to manage this data across components:

// marker.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MarkerService {
  private markersSubject = new BehaviorSubject<{ id: string, position: google.maps.LatLngLiteral, title: string }[]>([]);
  markers$ = this.markersSubject.asObservable();

  addMarker(marker: { id: string, position: google.maps.LatLngLiteral, title: string }): void {
    const currentMarkers = this.markersSubject.value;
    this.markersSubject.next([...currentMarkers, marker]);
  }

  updateMarker(updatedMarker: { id: string, position: google.maps.LatLngLiteral, title: string }): void {
    const currentMarkers = this.markersSubject.value;
    this.markersSubject.next(currentMarkers.map(m => m.id === updatedMarker.id ? updatedMarker : m));
  }

  getMarkerById(id: string): { id: string, position: google.maps.LatLngLiteral, title: string } | undefined {
    return this.markersSubject.value.find(m => m.id === id);
  }
}

This way, any component can subscribe to markers$ to get the latest list of markers, or call methods to add/update them without passing data through parent components.

内容的提问来源于stack exchange，提问作者Thorsten Westheider