带地图的角度 2 路由

Question

我在地图上创建了几个组件。必须根据路由路径显示组件。必须始终显示地图。例如，如果路径是"localhost：4200/investment"，那么投资组件必须显示在地图上。例如，如果路径是"localhost：4200/layers"，那么LayersComponent必须显示在地图上。主页组件是一个静态页面。投资组件和图层组件必须在地图上工作。我创建了一个示例。这里的问题是，当路径是"本地主机：4200/图层"或"本地主机：4200/投资"时，地图正在创建两次。有最好的方法吗？我该怎么办？

App.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {InitService} from './services/init.service';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import { NavbarComponent } from './partials/navbar/navbar.component';
import {InvestmentComponent} from './map/investment/investment.component';
import {HomeComponent} from './home/home.component';
import {MapComponent} from './map/map.component';
import { LayersComponent } from './map/layers/layers.component';
const appRoutes: Routes = [
{path: '', component: HomeComponent},
{path: 'layers', component: MapComponent},
{path: 'investment', component: MapComponent}
];
@NgModule({
declarations: [
AppComponent,
MapComponent,
InvestmentComponent,
HomeComponent,
LayersComponent,
NavbarComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule.forRoot(
appRoutes
)
],
providers: [InitService],
bootstrap: [AppComponent]
})
export class AppModule {    
}

MapComponent.ts

import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {InitService} from '../services/init.service';
declare let L;
@Component({
selector: 'app-map',
templateUrl: 'map.component.html',
styleUrls: ['map.component.scss']
})
export class MapComponent implements OnInit {
constructor(public router: Router, public init: InitService) {
}
ngOnInit() {
init();
}
init(){
const lat = 26.86663;
const lng = 54.98663;
const globalMap = L.map('mapContainer', {
zoomControl: true,
maxZoom: 21,
minZoom: 4
}).setView([lat, lng], 13);
globalMap.zoomControl.setPosition('bottomright');
const maplayer = L.tileLayer('https://{s}.google.com/vt/lyrs=s,h&hl=tr&x={x}&y={y}&z={z}', {
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
maxNativeZoom: 21,
zIndex: 0,
maxZoom: 21
}).addTo(globalMap);       
}
}

地图组件.html

<div class="adrCenter overflow-hidden">
<app-navbar></app-navbar>
<div class="container-fluid">
<div id="adrRow" class="row">
<div id="adrColLeft" class="adrCol scrollbar col-2">
<app-layers *ngIf="router.url == '/layers'"></app-layers>
<app-investment *ngIf="router.url == '/investment'"></app-investment>
</div>
<div id="adrColCenter" class="adrCol col-10">                 
</div>
<div #mapContainer id="mapContainer" class="active" style="width: 100%; height: 800px;"></div>
</div>                
</div>
</div>
</div>

Answer 1

如果您想考虑更改路线，可以执行以下操作：

const appRoutes: Routes = [
{path: 'home', component: HomeComponent},
{path: '', component: MapComponent, children: [
{path: 'layers', component: LayersComponent},
{path: 'investment', component: InvestmentComponent}
]}
];

我已经为您创建了一条路线HomeComponent.和一个空路由('')作为MapComponent的父路由。

现在，您需要做的就是将地图添加到您的MapComponent以及一个将托管您的LayersComponent和InvestmentComponent模板的<router-outlet></router-outlet>。

---

这是您的参考的工作示例堆栈闪电战。

---

注意：请注意，我已经安装了ngx-leaflet来加载地图。