javascript - Angular 2 Leaflet Tiles 巨大间隙

Question

在我的 Angular 2 应用程序之外使用相同的配置，传单加载正常，但这就是 Angular 2 中发生的情况:

如果我移动 map ，则会加载不同的图 block ，但同样的问题仍然存在。

html:

<div class="leaflet-maps" id="map"></div>

组件:

    let el = this._elementRef.nativeElement.querySelector('.leaflet-maps');

    let map = L.map("map", {
        zoomControl: false,
        center: L.latLng(37.8, -96),
        zoom: 5,
        minZoom: 4,
        maxZoom: 19
    });

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

我已通过以下方式加载传单 css 文件:

styleUrls: ['./maps.component.scss']

我粘贴传单 css 内容的位置

/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,

....

Answer 1

这解决了我的问题:

import { Component, ViewEncapsulation} from '@angular/core';

@Component({
    selector: 'maps',
    templateUrl: 'maps.component.html',
    styleUrls: ['./maps.component.scss'],
    encapsulation: ViewEncapsulation.None  // <--
})