时间戳

首页 > 解决方案 > Angular 6 - 如何在组件级别应用外部 CSS 样式表（传单）？

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

问题描述

尝试在 Angular 6 组件中使用 Leaflet。根据 css 文件的链接方式，地图显示正常或混乱，丢失的图块顺序不正确，这意味着未考虑 css。

我设法使它与将 css 链接到应用程序级别（全局）的 2 个解决方案一起工作，但不仅仅是组件。这是我尝试过的（除了阅读有关 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 组件中

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

注意：我正在使用 Bing 层扩展，但这对此问题没有影响。我也有同样的问题，而是使用 Mapbox 瓷砖。

问题：有没有办法将 Leaflet css 链接到组件中并使其仅可用于组件，但不能用于整个 Angular 应用程序？

谢谢！

标签： cssangularleafletcomponents

解决方案

好的，这就是有效的（感谢@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>

希望这可以帮助。

推荐阅读