web-dev-qa-db-ja.com

Angular 6-外部CSSスタイルシート（リーフレット）をコンポーネントレベルで適用する方法は？

Angular 6コンポーネント。 cssは考慮されません。

私は、CSSをアプリケーションレベル（グローバル）にリンクする2つのソリューションで動作させることができましたが、コンポーネントだけにリンクすることはありませんでした。私が試したものは次のとおりです（css/leaflet/Angularに関するいくつかの投稿に加えて）。

Worked-グローバルレベル：

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

Worked-グローバルレベル：

// 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タイルを使用しても同じ問題が発生しました。

質問：コンポーネント内のリーフレットcssをリンクし、コンポーネントのみが利用できるようにする方法はありますが、Angularアプリケーション？

ありがとう！

cssangularleafletcomponents
8
supafly

うまくいきました（@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>

もう1つ：高さ％を機能させるには、親のサイズを定義する必要があります。これは、現在index.htmlで次のように行っています。

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

お役に立てれば。

12
supafly