Угловой 6 - Как применить внешнюю таблицу стилей CSS (листовка) на уровне компонента? - PullRequest
Новая
       9

Угловой 6 - Как применить внешнюю таблицу стилей CSS (листовка) на уровне компонента?

0 голосов
/ 25 июня 2018

Попытка использовать Leaflet в Angular 6 компонент.В зависимости от того, как связан файл 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)
        });
        // ...

Не работает : инкапсуляция - уровень компонента: Загрузка внешнего стиля CSS в Angular 2 Component

Загрузка из CDN вместо локальногофайл не меняет проблему.

Примечание. Я использую расширение слоя Bing, но это не влияет на эту проблему.У меня также была та же проблема с использованием листов Mapbox.

Вопрос : есть ли способ связать листовую CSS в компоненте и сделать ее доступной только для компонента, но нена все приложение Angular?

Спасибо!

1 Ответ

0 голосов
/ 25 июня 2018

Хорошо, вот что сработало (спасибо @Palsri, я еще раз прочитал пост в блоге и рекомендации по угловому стилю и попробовал следующее, что сработало):

В отдельном файле 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>

Надеюсь, это поможет.

...