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

Question

我知道这是一个经常出现的问题，可以通过修复导入语句来解决。我目前有

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。有什么想法吗？

编辑：我还应该补充一点，这只是在测试中出现。

Answer 1

当 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 { }

有一个教程介绍了如何使用 Angular CLI 启动和运行，但它没有解决您使用 ngx-leaflet 拥有应用程序模块的子模块的情况。

其他几点注意事项：

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

Answer 2

我修好了它。我没有将正确的导入添加到父组件的测试配置文件中。现在一切都好！

Answer 3

我在测试中遇到了同样的问题，但是当我添加时：

imports: [
  LeafletModule,
  LeafletMarkerClusterModule
]

问题消失了。

Answer 4

如果它对任何人有帮助，那么当我没有将新MapComponent的放入declarationsin时我得到了这个app.module.ts（使用 ngx-leaflet 否则正确导入）。