Angular 6 - 如何在组件级别应用外部 CSS 样式表(传单)?

2022-01-12 00:00:00 leaflet css components angular

尝试在 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>

希望这会有所帮助.

相关文章