Hey there, let's unpack what's going on with your Leaflet map in Angular—this is a super common gotcha with map libraries and Angular's lifecycle hooks!

The Core Issue: Timing is Everything #

First, let's break down why your initial invalidateSize call in leafletMapReady doesn't fix the problem long-term:

• The leafletMapReady event fires as soon as the Leaflet map instance is created, but this doesn't mean Angular has finished rendering and laying out your component's DOM. When you switch back to the map component from another view, the map container's size might have changed (e.g., parent components resized, hidden elements became visible), but the leafletMapReady event only triggers once during initialization.
• Even the setTimeout hack might work for the first load but fails for component switches because it doesn't account for future DOM layout changes.

Why ngAfterViewChecked Fixes It #

Angular's ngAfterViewChecked lifecycle hook runs every time Angular finishes checking and updating the view (and all child views). That means:

• When you switch back to the map component, Angular re-renders the view, and ngAfterViewChecked fires after the DOM is fully laid out. At this point, the map container has its actual final size, so calling invalidateSize here tells Leaflet to recalculate the map bounds and load the correct tiles.
• It also handles other scenarios like browser window resizing or parent component layout changes that would break the map tiles.

A Performance-Friendly Improvement #

One catch: ngAfterViewChecked fires very frequently (on every view update, including small changes like input value updates). Calling invalidateSize every time can cause unnecessary performance overhead. Here's how to optimize it:

import { Component, OnInit, AfterViewChecked, ElementRef, ViewChild } from '@angular/core';
import { latLng, MapOptions, tileLayer, Map } from 'leaflet';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, AfterViewChecked {
  options: MapOptions;
  private mapInstance: Map;
  private lastContainerSize = { width: 0, height: 0 };
  @ViewChild('map') mapContainer: ElementRef;

  constructor() { }

  ngOnInit(): void {
    this.options = {
      layers: [
        tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: 18,
          attribution: 'Map data © OpenStreetMap contributors',
          minZoom: 5
        })
      ],
      zoom: 5,
      center: latLng(46.879966, -121.726909)
    };
  }

  onMapReady(map: Map) {
    this.mapInstance = map;
    // Run initial size check
    this.updateMapSizeIfNeeded();
  }

  ngAfterViewChecked(): void {
    this.updateMapSizeIfNeeded();
  }

  private updateMapSizeIfNeeded(): void {
    if (!this.mapInstance) return;

    const container = this.mapContainer.nativeElement;
    const currentWidth = container.offsetWidth;
    const currentHeight = container.offsetHeight;

    // Only update if the container size actually changed
    if (currentWidth !== this.lastContainerSize.width || currentHeight !== this.lastContainerSize.height) {
      this.mapInstance.invalidateSize(true);
      this.lastContainerSize = { width: currentWidth, height: currentHeight };
    }
  }
}

This code:

• Stores the map instance and last known container size
• Only calls invalidateSize when the container's width/height actually changes, avoiding redundant calls
• Handles both initial load and post-component-switch scenarios

Quick Recap #

• leafletMapReady is too early: it fires before Angular finishes laying out the DOM, so the map gets incorrect size data
• ngAfterViewChecked runs after every view update, ensuring the map always uses the latest container dimensions
• Adding a size check keeps the solution performant

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