Angular 12 - 传单：传单路由处理问题 - 类型“类型导入”上不存在属性“路由”

Posted 2023-03-13

【中文标题】Angular 12 - 传单：传单路由处理问题 - 类型“类型导入”上不存在属性“路由”

【英文标题】：Angular 12 - leaflet : leaflet routing maching problem - Property 'Routing' does not exist on type 'typeof import

【发布时间】：2021-10-12 15:46:14

【问题描述】：

希望你们一切都好。 我正在尝试使用传单路由处理，但我不知道是什么问题。

我已经完成的步骤：

npm install --save leaflet-routing-machine dashboard.component.ts

import Component, OnInit from '@angular/core';
import * as L from 'leaflet';
import 'leaflet-routing-machine';
import "leaflet-routing-machine/dist/leaflet-routing-machine.css";
import Poste from "@/Model/Poste";
import PosteService from "@services/poste.service";
import HttpErrorResponse from "@angular/common/http";
import SharedDataService from "@services/shared-data.service";
import ToastrService from "ngx-toastr";

// default icon (blue)
let iconDefault = L.icon(
  iconUrl: 'assets/marker-icon.png',
  shadowUrl: 'assets/marker-shadow.png',

  iconSize:     [25, 41], // size of the icon
  shadowSize:   [41, 41], // size of the shadow
  iconAnchor:   [12, 41], // point of the icon which will correspond to marker's location
  shadowAnchor: [12, 41],  // the same for the shadow
  popupAnchor:  [1, -34] // point from which the popup should open relative to the iconAnchor
);
// red icon
let redIcon = L.icon(
  iconUrl: 'assets/marker-icon-red.png',
  shadowUrl: 'assets/marker-shadow.png',

  iconSize:     [25, 41], // size of the icon
  shadowSize:   [41, 41], // size of the shadow
  iconAnchor:   [12, 41], // point of the icon which will correspond to marker's location
  shadowAnchor: [12, 41],  // the same for the shadow
  popupAnchor:  [1, -34] // point from which the popup should open relative to the iconAnchor
);
// user icon
let userIcon = L.icon(
  iconUrl: 'https://assets.mapquestapi.com/icon/v2/flag-Moi-3B5998-22407F-lg.png',
  popupAnchor:  [1, -34] // point from which the popup should open relative to the iconAnchor
);


@Component(
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.scss']
)

export class DashboardComponent 
  public postes: Poste[];
    public map;
    public posteInfo : Poste;
  public delegations: number[];
  public selectedDeleg: number;
  public markerGroup;
  public rangeValues: number[] = [0,100];



  constructor(private posteService: PosteService,private sharedDataService:SharedDataService,
              private toastr: ToastrService) 
    this.selectedDeleg=0;
  


  createMap()
        const Casablanca = 
            lat : 33.5731104,
            lng : -7.5898434
        ;

        const ZoomLevel = 12;
        this.map = L.map('map',
            center: [Casablanca.lat, Casablanca.lng],
            zoom: ZoomLevel
        );

        const mainLayer = L.tileLayer('https://s.tile.openstreetmap.org/z/x/y.png', 
          minZoom: 11,
          maxZoom: 17,
          attribution: '© Carte LYDEC '
        );
        mainLayer.addTo(this.map);
        this.getPostes();
    

// ERROR 
  L.Routing.control(
    waypoints: [
      L.latLng(57.74, 11.94),
      L.latLng(57.6792, 11.949)
    ]
  ).addTo(this.map);

错误

TS2339：“类型导入”类型上不存在属性“路由”（“C:/Users/HP/Desktop/EHTP GI/EHTP 2_GI 2020-2021/Stage ing\u00E9nieur/Stage Lydec 2021/Projet/Console_FrontEnd/ node_modules/@types/leaflet/index")'。

【参考方案1】：

在方法中放置L.Routing 部分而不是全局。

export class DashboardComponent implements AfterViewInit 
  ...

  ngAfterViewInit() 
    this.createMap();

    L.Routing.control(
      waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
      ]
    ).addTo(this.map);
  

Sample Solution on StackBlitz

---

参考

How To Build Maps in Angular with Leaflet, Part 1: Generating Maps