Angular 17 独立应用程序上的传单出现错误

Question

我是最近的 Angular 用户。 我正在尝试向我的项目添加传单地图。 我发现我必须使用一项服务来避免与窗口相关的错误。 我使用了以下示例：https://github.com/NickToony/universal-starter-leaflet-example 我像这样制作了我的 map.service.tst 文件

import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable()
export class MapService {

  public L = null;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    if (isPlatformBrowser(platformId)) {
      this.L = require('leaflet');
    }
  }

}

我的map.component.ts文件是这样的

import { Component, OnInit } from '@angular/core';
import { MapService } from '../services/map.service';
import { Map } from 'leaflet';

@Component({
  selector: 'app-map',
  standalone: true,
  imports: [],
  templateUrl: './map.component.html',
  styleUrl: './map.component.css',
})

export class MapComponent implements OnInit {
  public message!: string;
  private map!: Map;

  constructor(private mapService: MapService) {}

  ngOnInit() {
    if (this.mapService.L) {
      // Leaflet is loaded - load the map!
      this.message = 'Map Loaded';
      this.setupMap();
    } else {
      // When the server renders it, it'll show this.
      this.message = 'Map not loaded';
    }
  }

  private setupMap() {
    if (!this.mapService || !this.mapService.L) {
      console.error('mapService is not initialized');
      return;
    }

    // Create the map in the #map container
    this.map = this.mapService.L.map('map').setView([51.505, -0.09], 13);

    // Add a tilelayer
    this.mapService.L.tileLayer(
      'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
      {
        attribution:
          'copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>,' +
          ' Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
      }
    ).addTo(this.map);

  }
}

在map.component.ts中，我有两个错误 “never”类型上不存在“map”属性。 “从不”类型上不存在“tileLayer”属性。

我不知道如何克服这两个错误。

Answer 1

当我看到

public L = null;

时，我的理解是 TypeScript 推断该类型为

null

。因此，当您调用

mapService.L.tileLayer

时，您基本上是在尝试调用

null.tileLayer

，它会按预期抛出。

我相信您需要修改

L

的类型以使其更加扩展：

public L: any = null;

这应该允许您调用任何方法并使用任何属性。

由于您将

L

设置为

require('leaflet')

，因此不会隐式提供类型。

如果你真的热衷于类型安全，你可以尝试更狭窄地定义

L

的类型：

public L: {
  map: (mapName: string) => ...
  tileLayer: (layerUrl: string, ...) => ...
  ...
} | null = null;