Angular 6 - 如果 BrowserAnimationsModule 导入(Openlayers)时出现渲染问题 [英] Angular 6 - Rendering problems if BrowserAnimationsModule imported (Openlayers)

问题描述

我基本上有一个渲染小地图的应用程序.在这个页面上还有一个切换"按钮，它在父组件中隐藏带有 *ngIf 的小地图，并以大地图显示.如果我现在在 app.module.ts 中导入 BrowserAnimationsModule，如果我单击切换按钮，则不会呈现大地图(仅当我在 map-base.component.ts 的 ngOnInit 中创建地图之前设置了 1ms 的超时).

抱歉..有点难以解释，代码如下:

App.module.ts

<预><代码>...@NgModule({声明: [应用组件，地图小组件，地图大组件，地图基础组件],进口:[浏览器模块，表单模块，BrowserAnimationsModule,//注释此行，使应用程序工作],提供者:[]，引导程序:[AppComponent]})导出类 AppModule { }

app.component.ts

@Component({选择器:'app-root'，模板:`<app-map-small *ngIf="small"></app-map-small><app-map-large *ngIf="!small"></app-map-large><button (click)="small = !small">切换</button>`,styleUrls: ['./app.component.scss']})导出类 AppComponent {小 = 真；}

ma​​p-base.component.ts

@Component({选择器:'app-map-base'，模板:`<div id="map" class="map"></div>`,styleUrls: ['./map-base.component.scss']})导出类 MapBaseComponent 实现 OnInit {地图:OlMap；构造函数(){}ngOnInit() {this.map = new OlMap({目标:'地图'，层:[new OlTileLayer({ source: new OlOSM() })],视图:new OlView({ zoom: 13, center: fromLonLat([13.376935, 52.516181]) }),控制:[]});}}

ma​​p-small.component.ts

@Component({选择器:'app-map-small'，模板:`<p>其他东西</p><div style="max-width:500px"><app-map-base></app-map-base>

<p>其他东西2</p>`，styleUrls: ['./map-small.component.scss']})导出类 MapSmallComponent 实现 OnInit {构造函数(){}ngOnInit() {}}

ma​​p-large.component.ts

@Component({选择器:'app-map-large'，模板:`<p>一些其他的东西</p><app-map-base></app-map-base>`,styleUrls: ['./map-large.component.scss']})导出类 MapLargeComponent 实现 OnInit {构造函数(){}ngOnInit() {}}

依赖项

依赖项":{"@angular/animations": "^6.0.9","@angular/cdk": "^6.4.0","@angular/common": "^6.0.2","@angular/compiler": "^6.0.2","@angular/core": "^6.0.2","@angular/forms": "^6.0.2","@angular/http": "^6.0.2","@angular/material": "^6.4.0","@angular/platform-b​​rowser": "^6.0.2","@angular/platform-b​​rowser-dynamic": "^6.0.2","@angular/router": "^6.0.2","core-js": "^2.5.4","ol": "^5.1.3","rxjs": "^6.0.0",zone.js":^0.8.26"},

那么为什么一切正常，如果我不导入 BrowserAnimationsModule 并且如果我导入它会中断?我想使用 Angular Material，我需要它...

解决方案

这里有一个解决方案，

组件模板

组件类实现了OnInit并具有下一个属性

@ViewChild('mapElementRef', { static: true }) mapElementRef: ElementRef;

最后在ngOnInit方法上初始化地图，可以使用

this.map.setTarget(this.mapElementRef.nativeElement);

希望有帮助.

I basically have a App which renders a small map. On this page is also a "toggle" button which hides the small map with a *ngIf in the parent component and displays the map in large instead. If I now import BrowserAnimationsModule in app.module.ts the large map is not rendered if I click on the toggle button (only if i set a timeout of 1ms before the map is created in ngOnInit of map-base.component.ts).

Sorry..it's a bit hard to explain, here's the code:

App.module.ts

...
@NgModule({
  declarations: [
    AppComponent,
    MapSmallComponent,
    MapLargeComponent,
    MapBaseComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule, // comment this line, to make the app work
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

@Component({
  selector: 'app-root',
  template: `
  <app-map-small *ngIf="small"></app-map-small>
  <app-map-large *ngIf="!small"></app-map-large>
  <button (click)="small = !small">Toggle</button>`,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  small = true;
}

map-base.component.ts

@Component({
  selector: 'app-map-base',
  template: `<div id="map" class="map"></div>`,
  styleUrls: ['./map-base.component.scss']
})
export class MapBaseComponent implements OnInit {
  map: OlMap;
  constructor() { }

  ngOnInit() {
    this.map = new OlMap({
      target: 'map',
      layers: [new OlTileLayer({ source: new OlOSM() })],
      view: new OlView({ zoom: 13, center: fromLonLat([13.376935, 52.516181]) }),
      controls: []
    });
  }
}

map-small.component.ts

@Component({
  selector: 'app-map-small',
  template: `
    <p>other stuff</p>
    <div style="max-width:500px">
      <app-map-base></app-map-base>
    </div>
    <p>other stuff2</p>
  `,
  styleUrls: ['./map-small.component.scss']
})
export class MapSmallComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

map-large.component.ts

@Component({
  selector: 'app-map-large',
  template: `
  <p>Some other stuff</p>
  <app-map-base></app-map-base>`,
  styleUrls: ['./map-large.component.scss']
})
export class MapLargeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

dependencies

"dependencies": {
    "@angular/animations": "^6.0.9",
    "@angular/cdk": "^6.4.0",
    "@angular/common": "^6.0.2",
    "@angular/compiler": "^6.0.2",
    "@angular/core": "^6.0.2",
    "@angular/forms": "^6.0.2",
    "@angular/http": "^6.0.2",
    "@angular/material": "^6.4.0",
    "@angular/platform-browser": "^6.0.2",
    "@angular/platform-browser-dynamic": "^6.0.2",
    "@angular/router": "^6.0.2",
    "core-js": "^2.5.4",
    "ol": "^5.1.3",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },

So why works everything fine, if I don't import BrowserAnimationsModule and it breaks if I import it? I want to use Angular Material, that's I would need it...

解决方案

Here is a solution,

Component template

<div #mapElementRef class="map"></div>

Component class implements OnInit and has the next property

@ViewChild('mapElementRef', { static: true }) mapElementRef: ElementRef;

finally initialize the map on ngOnInit method, you can use

this.map.setTarget(this.mapElementRef.nativeElement);

Hope it helps.

这篇关于Angular 6 - 如果 BrowserAnimationsModule 导入(Openlayers)时出现渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！