問題描述

嘗試在 Angular 6 組件中使用 Leaflet.根據 css 文件的鏈接方式，地圖顯示正常或混亂，丟失的圖塊順序不正確，這意味著 css 未被考慮在內.

Trying to use Leaflet in an Angular 6 component. Depending on how the css file is linked, the map shows ok or is messed up, there are missing tiles not in the right order, which means the css is not taken into account.

我設法使它與將 css 鏈接到應用程序級別(全局)的 2 個解決方案一起工作，但絕不只鏈接到組件.這是我嘗試過的(除了閱讀了幾篇關于 css/leaflet/Angular 的帖子):

I managed to make it work with 2 solutions linking the css to the application level (global), but never only to the component. Here's what I tried (in addition to reading several posts about css/leaflet/Angular):

工作過 - 全球層面:

// styles.css
@import url("assets/lib/leaflet/leaflet.css");

工作過 - 全球層面:

// index.html
<link rel="stylesheet" href="./assets/lib/leaflet/leaflet.css" type="text/css">

無效 - 全局級別:

// angular.json
"styles": [
    "src/styles.css",
    "src/assets/lib/leaflet/leaflet.css"
],

不起作用 - 組件級別:

// ...

import * as L from "../assets/lib/leaflet/leaflet.js";
import "../assets/lib/leaflet/leaflet-bing-layer.js";
import { BingHelper } from "../assets/lib/bing/bing-helper.js";

// -> importing the .css file here does not work

@Component({
    templateUrl: "./map.component.html",
    selector: "app-map",
    styleUrls: ["../assets/lib/leaflet/leaflet.css"] // -> does not work

    // -> also tried to put the content of the .css in style: "", did not work neither

})
export class MapComponent implements AfterViewInit {
    ngAfterViewInit() {
        var map = L.map("map", {
            attributionControl: false,
            zoom: 8,
            minZoom: 3,
            maxZoom: 15,
            center: new L.LatLng(40.737, -73.923)
        });
        // ...

不起作用:封裝 - 組件級別:將外部css樣式加載到Angular 2組件中

Did not work: encapsulation - component level: Load external css style into Angular 2 Component

從 CDN 加載而不是本地文件不會改變問題.

Loading from CDN instead of local file does not change the issue.

注意:我正在使用 Bing 層擴展，但這對此問題沒有影響.我也有同樣的問題，而是使用 Mapbox 瓦片.

問題:有沒有辦法將 Leaflet css 鏈接到組件中，并使其僅可用于該組件，而不能用于整個 Angular 應用程序?

Question: is there a way to link Leaflet css in a component and make it only available to the component, but not to the whole Angular application?

謝謝！

推薦答案

好的，這就是有效的方法(感謝@Palsri，我再次閱讀了博客文章和 Angular 樣式指南，并嘗試了以下方法，效果很好):

Ok, here's what worked (thanks @Palsri, I read once more the blog post and the Angular styling guidelines and tried the following, which worked):

在單獨的 css 文件中，導入傳單 css:

In a separate css file, import the leaflet css:

// map.component.css
@import url("../assets/lib/leaflet/leaflet.css");

.mapstyle {
    width: 100%;
    height:100%;
};

然后在組件中，引用這個css而不是leaflet css，如下:

Then in the component, reference this css instead of the leaflet css as follows:

@Component({
    templateUrl: "./map.component.html",
    selector: "app-map",
    styleUrls: ["./map.component.css"],
    encapsulation: ViewEncapsulation.None
})

這是html模板中的代碼:

Here's the code in the html template:

<div id="map" class="mapstyle"></div>

還有一件事:要使高度 % 起作用，您需要定義父母的大小，我目前在 index.html 中這樣做如下:

One more thing: for the height % to work, you need to define the parents size, which I currently did in the index.html as follows:

<style>
html, body {
    min-height: 100% !important;
    height:     100%;
    padding: 0px 0px 0px 0px;
    margin:  0px 0px 0px 0px;
}
</style>

希望這會有所幫助.

這篇關于Angular 6 - 如何在組件級別應用外部 CSS 樣式表(傳單)?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！