web-dev-qa-db-fra.com

Angular 6 - Comment appliquer une feuille de style CSS externe (dépliant) au niveau du composant?

Essayer d'utiliser Leaflet dans un composant Angular 6. Selon la façon dont le fichier css est lié, la carte affiche ok ou est gâchée, il manque des tuiles pas dans le bon ordre, ce qui signifie que le css n'est pas pris en compte.

J'ai réussi à le faire fonctionner avec 2 solutions reliant le CSS au niveau application (global), mais jamais uniquement au composant. Voici ce que j'ai essayé (en plus de lire plusieurs articles sur css/leaflet/Angular):

Fonctionné - niveau global:

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

Fonctionné - niveau global:

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

N'a pas fonctionné - niveau global:

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

N'a pas fonctionné - niveau composant:

// ...

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

N'a pas fonctionné : encapsulation - niveau composant: Charger le style CSS externe dans Angular 2 Component =

Le chargement à partir du CDN au lieu du fichier local ne change pas le problème.

Remarque: j'utilise une extension de couche Bing, mais cela n'a aucun impact sur ce problème. J'ai également eu le même problème en utilisant des tuiles Mapbox à la place.

Question : existe-t-il un moyen de lier Leaflet css dans un composant et de le rendre disponible uniquement pour le composant, mais pas pour l'ensemble Angular?

Merci!

cssangularleafletcomponents
8
supafly

Ok, voici ce qui a fonctionné (merci @Palsri, j'ai relu le billet de blog et les lignes directrices de style Angular et j'ai essayé ce qui a fonctionné):

Dans un fichier css séparé, importez le dépliant css:

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

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

Ensuite, dans le composant, référencez ce CSS au lieu du CSS de la brochure comme suit:

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

Voici le code dans le modèle html:

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

Encore une chose: pour que la hauteur% fonctionne, vous devez définir la taille des parents, ce que je fais actuellement dans le fichier index.html comme suit:

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

J'espère que cela t'aides.

12
supafly