角2小叶瓦片巨大的缝隙

Question

在我的角2应用程序之外使用相同的配置，传单可以很好地加载，但这是在角2中发生的情况：

如果我移动地图，不同的瓷砖加载，但同样的问题仍然存在。

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  // <--
})

Answer 2

在index.html中添加下面的CSS链接。这将解决瓷砖问题。

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />