![ngOnInit]( "ngOnInit")
本文介绍了Angular 6 - 如果 BrowserAnimationsModule 导入(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 {小 = 真；}
map-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]) }),控制:[]});}}
map-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() {}}
map-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-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"},
那么为什么一切正常，如果我不导入 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)时出现渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！