Question

尝试在Angular 6组件中使用Leaflet。根据css文件的链接方式，地图显示为“正常”或被弄乱了，缺少的图块顺序不正确，这表示未考虑css。

我设法使其与2种解决方案一起使用，这些解决方案将css链接到应用程序级别（全局），但绝不仅限于组件。这是我尝试的方法（除了阅读有关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)
        });
        // ...

无效：封装-组件级别： Load external css style into Angular 2 Component

从CDN加载而不是从本地文件加载不会改变问题。

注意：我正在使用Bing层扩展，但这对这个问题没有影响。使用Mapbox磁贴也有同样的问题。

问题：是否可以在组件中链接Leaflet css，使其仅对组件可用，而对整个Angular应用程序不可用？

谢谢！

Answer 1

好，这是可行的方法（感谢@Palsri，我再次阅读了博客文章和Angular样式指南，并尝试了以下可行的方法）：

在一个单独的css文件中，导入传单css：

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

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

然后在组件中，如下所示引用此css而不是传单css：

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

这是html模板中的代码：

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

另一件事：要使高度％工作，您需要定义父母的大小，我目前在index.html中的操作如下：

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

希望这会有所帮助。

Answer 2

执行此操作

@import url("path")

例如：

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css")

或也可以做

@import "bootstrap/dist/css/bootstrap.min.css"

Angular 6-如何在组件级别应用外部CSS样式表（传单）？

2 个答案: