Question

我在地图上创建了一些组件。必须根据路由路径显示组件。该地图必须始终出现。例如，如果路径为“ localhost：4200 / investment”，则InvestmentComponent必须出现在地图上。例如，如果路径为“ localhost：4200 / layers”，则LayersComponent必须出现在地图上。 HomeComponent是一个静态页面。 InvestmentComponent和LayersComponent必须在地图上可用。我创建了一个例子。这里的问题是，当路径为“ localhost：4200 / layers”或“ localhost：4200 / investment”时，地图将创建两次。有没有最好的方法？我能怎么做？

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);       
   }
}

MapComponent.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和<router-outlet></router-outlet>模板的LayersComponent一起添加到InvestmentComponent中。

这是您推荐的Working Sample StackBlitz。

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

带地图的Angular 2路由

1 个答案: