尝试在 Angular 6 组件中使用 Leaflet。根据 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 加载到组件中
从 CDN 而不是本地文件加载不会改变问题。
注意：我使用的是必应图层扩展，但这对此问题没有影响。我也在使用地图框图块时遇到了同样的问题。
问题：有没有办法在组件中链接 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>
还有一件事：要使身高%起作用，您需要定义父级大小，我目前在索引中这样做.html如下所示：
<style>
html, body {
min-height: 100% !important;
height: 100%;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
</style>
这样做
@import url("path")
前任：
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css")
或多伊格也
@import "bootstrap/dist/css/bootstrap.min.css"