如何使用自定义组件以角度形式包含传单地图

如何解决如何使用自定义组件以角度形式包含传单地图

我必须在我正式使用角度的地方创建传单地图。

我已经为传单地图创建了自定义组件

leaflet.component.ts

import { Component,OnInit } from '@angular/core';
declare let L: any

@Component({
    selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class LeafletComponent implements OnInit {

    constructor() {

    }

    ngOnInit() {
        const map = L.map('map').setView([51.509865,-0.118092],10);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);
    }

}

我已经在主要的Angular组件中包含了上面地图的css和html

.formly.component.html

  <mat-tab label="AREAS COVERED">
      
        <div id="map"></div>
      </mat-tab>

.formly.component.css

div{
    height: 500px;
    width: 500px;
}

在 app.module.ts 中我添加了自定义组件

app.module.ts

import { LeafletComponent } from './ang-formly/ang-formly/leaflet-component';

@NgModule({
  declarations: [
    AppComponent,LeafletComponent,

现在地图没有加载任何人都可以帮助我如何以角度形式添加这个自定义组件