Question

我已经坚持了几个小时，而且我不知道该怎么做，这是我的问题。

所以，我正在使用mapboxgl来创建带有绑定到标记的弹出窗口的地图。

我有一个第一个问题，就是当我这样做时弹出窗口的html代码：

let newPopup = mapboxgl.Popup().setHTML('<div (click)="openAlert()"</div>');

角度代码无法通过角度解释，因此没有指令和事件正常工作。为了解决这个问题，我决定使用ComponentFactoryResolver切换到动态组件。

现在该部分工作正常但我的所有模块似乎都不再像我的MaterialModules那样可以访问了。我解释一下：

以下是我在map.component.ts中创建新PopupComponent的方法：

constructor(public resolver: ComponentFactoryResolver, public injector: Injector) {
  mapboxgl.accessToken = environment.mapbox.accessToken;
  this.factory = this.resolver.resolveComponentFactory(PopupComponent);
}

ngOnInit() {

  this.map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v10',
    zoom: 14,
    center: ['50.6008333333', '26.2111111111']
  });

  const component = this.factory.create(this.injector);

  const newmarker = new mapboxgl.Marker().setLngLat([50.6008333333, 26.2111111111]).addTo(this.map);
  const newPopup = new mapboxgl.Popup().setDOMContent(component.location.nativeElement);
  newmarker.setPopup(newPopup);
  newmarker.togglePopup();
}

我的popup.component.ts非常简单，现在几乎什么都不做：

import { Component, Input } from '@angular/core';
import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';


@Component({
 selector: 'app-popup',
 templateUrl: './popup.component.html',
 styleUrls: ['./popup.component.css']
})

export class PopupComponent {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry
      .addSvgIcon(
        'bar', sanitizer.bypassSecurityTrustResourceUrl('/assets/icon/bar.svg'));
  }
}

这是popup.component.html没有什么特别的：

<div class="popup-pict"></div>
<div class="popup-info">
  <div class="popup-titlediv">
    <span>Place Name</span>
      <mat-icon svgIcon="bar"></mat-icon>
      <mat-form-field>
        <input matInput placeholder="Input">
      </mat-form-field>
  </div>
</div>
<div class="popup-seemore">See more</div>

这是我的map.module.ts：

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

import { SharedModule } from '../shared/shared.module';

import { MapRoutingModule } from './map-routing.module';

import { MapComponent } from './map.component';
import { SearchboxComponent } from './searchbox/searchbox.component';
import { PopupComponent } from './popup/popup.component';

@NgModule({
  imports: [SharedModule, MapRoutingModule],
  declarations: [MapComponent, SearchboxComponent, PopupComponent],
  entryComponents: [PopupComponent]
})

export class MapModule {

}

您可以在我的弹出窗口的html代码中注意到我使用"<mat-icon>"这种方式在材质中显示svg图标，但它不可见。我还使用"<mat-form-field>"材料，这个材料是可见的并且具有正确的样式但没有动画正在工作，它就像一个经典的输入。

我确切地说，在我的SharedModule中，我拥有MaterialModule，而在我的MapComponent中我有一些运作良好的材料指令。似乎这是动态创建产生此问题的组件的事实。我还有其他模块也无法正常工作。

我不知道该怎么做，我在谷歌上没有发现这样的问题，没有一个人在动态组件中使用模块中的代码（如FormsModule）进行比较，看看我是什么＆＃39我做错了。

在创建的动态组件中似乎无法访问导入的模块

0 个答案: