css - 使用 Angular-CLI 和 yaga 的 splinter 传单 map 。在哪里插入 leaflet.css？

Question

我正在尝试使用 yaga 组件 ( npm yaga-module ) 显示一个简单的传单 map 。因此，我使用angular cli生成了一个新元素，并按照npm页面上的介绍进行了操作。最后，我得到了一张破损的 map 。

Image of the broken map.

我已经使用 leaflet 库 + JS 甚至在 ionic 框架中使用 yaga 实现了一个工作 map 。在这两种情况下，如果我删除指向 leaflet.css 的链接，我都会得到相同的损坏 map 。但是我必须在哪里链接 css 文件？如果我在我的 .angular-cli.json 中插入路径，它似乎已成功加载。但后来我的 map 完全消失了。

我做错了吗？您可以在下面找到我的代码:

app.module.ts:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { YagaModule } from '@yaga/leaflet-ng2';

    import { AppComponent } from './app.component';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        YagaModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

app.component.ts:

    import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'Test';
    }

app.component.html:

<h1>{{title}}</h1>
<yaga-map [zoom]="2">
    <yaga-tile-layer [url]="'http://a.tile.osm.org/{z}/{x}/{y}.png'"></yaga-tile-layer>
</yaga-map>

我的app.component.css 文件是空的。知道出了什么问题吗？

Answer 1

在您的 styles.css 中添加以下代码行

@import '../node_modules/leaflet/dist/leaflet.css'