typescript 无法绑定到“leafletOptions”,因为它不是“div”的已知属性

cotxawn7  于 2023-02-10  发布在  TypeScript
关注(0)|答案(5)|浏览(141)

我知道这是一个经常出现的问题,可以通过修复import语句来修复。

import { LeafletModule } from 'node_modules/@asymmetrik/ngx-leaflet';
import * as L from 'leaflet';
import { } from '@types/leaflet';

我指的是选项,因此:

options = {
    layers: [
        this.googleHybrid
    ],
    zoom: 1.49,
    zoomSnap: 0,
    center: L.latLng([180, -180])}

我觉得我遇到这个问题,因为进口的一切从传单作为L。有什么想法?
编辑:我还应该补充一点,这只是在测试中出现的。

u2nhd7ah

u2nhd7ah1#

当Angular.io没有正确地将LeafletModule加载到您的应用程序中时,就会发生这种情况。通常,您需要执行以下操作:
首先,将LeafletModule导入到应用程序模块中:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LeafletModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后,如果您在应用程序模块的子模块中使用ngx-leaflet,您也需要将其导入该子模块:

import { NgModule } from '@angular/core';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';

@NgModule({
  declarations: [
  ],
  imports: [
    LeafletModule
  ],
  providers: []
})
export class MyModule { }

a tutorial解决了如何启动和运行Angular CLI,但它没有解决使用ngx-leaflet的应用程序模块的子模块的情况。
还有几点注意事项:

  • 当你导入LeafletModule的时候,需要提供node_modules的路径是不常见的,大多数构建管道会自动取消引用包。
  • @types/leaflet导入也是如此,如果需要的话,大多数构建管道会自动拉入类型信息。
  • 执行import * as L from 'leaflet';是完全有效的。您还可以根据需要导入特定项目,例如import Map from {leaflet};
zlwx9yxi

zlwx9yxi2#

我也有同样的问题,但当我补充说:

imports: [
  LeafletModule,
  LeafletMarkerClusterModule
]

问题就消失了。

9o685dep

9o685dep3#

我修正了这个问题。我没有为父组件添加正确的导入到我的测试配置文件中。现在一切都好了!

liwlm1x9

liwlm1x94#

如果它帮助任何人,我得到了这个当我没有把我的新MapComponentapp.module.tsdeclarations(与ngx传单,否则正确导入)。

qoefvg9y

qoefvg9y5#

在自定义模块中使用Map时会出现此问题。
我建议您尝试将自定义模块导入到应用程序模块中。

相关问题