Angular 6-如何在组件级别应用外部CSS样式表(传单)? [英] Angular 6 - How to apply external css stylesheet (leaflet) at component level?

问题描述

尝试在Angular 6组件中使用Leaflet.根据css文件的链接方式，地图显示为"ok"或被弄乱了，其中缺少的图块顺序不正确，这意味着没有考虑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)
        });
        // ...

不起作用:封装-组件级别: 将外部CSS样式加载到Angular 2组件中

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

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

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

谢谢！

解决方案

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

希望这会有所帮助.

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.

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):

Worked - global level:

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

Worked - global level:

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

Did not work - global level:

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

Did not work - component level:

// ...

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

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

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

Note: I am using a Bing layer extension, but this has no impact on this issue. I also had the same issue using Mapbox tiles instead.

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?

Thanks!

解决方案

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):

In a separate css file, import the leaflet css:

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

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

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

Here's the code in the html template:

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

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>

Hope this helps.

这篇关于Angular 6-如何在组件级别应用外部CSS样式表(传单)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！