Angular 找到用户位置后如何加载组件

Question

我想延迟组件的加载，直到找到用户的位置。我定义了一个子路由。该项目有一张地图和一个信息面板。地图和信息面板使用经纬度。我用了传单地图。我创建了一个解析器，但没有按预期工作。这里，'geo' 返回未定义。哪里错了？

HTML

<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="col-lg-7">
            <app-map></app-map>
        </div>
        <div class="col-lg-5 h-100">
            <div class="tab-content">
                <router-outlet></router-outlet>
            </div>
        </div>
    </div>
</div>

路线

export const appRoutes: Route[] = [
{
    path: 'info', component: InfoComponent, resolve: {geo: GeolocationService}, children: [
        {path: 'register', component: RegisterComponent},
        {path: 'list', component: ListComponent}
    ]
}];

地理定位服务

  export class GeolocationService implements Resolve<any> {

    constructor() {
    }

    resolve(): Observable<any> {
        return this.findLocation();
    }

    findLocation = () => {
        let coords;
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(position => {
                if (position.coords) {
                    coords = {lat: position.coords.latitude, lng: position.coords.longitude};
                    return coords;
                } else {
                    coords = {lat: 11, lng: 11};
                    return coords;
                }
            });
        } else {
            coords = {lat: 11, lng: 11};
            return coords;
        }
    };
}

信息组件

export class InfoComponent implements OnInit {
  constructor() {
  }

  ngOnInit(): void {
    this.route.data.subscribe(data => {
        console.log('data', data);
    });
   }
}

Answer 1

如果代码能够编译，我会觉得很可疑。您应该 return 来自 findLocation 的 Promise，否则什么也不会发生。

export class GeolocationService implements Resolve<any> {

    resolve(): Promise<{lat: number, lng:number}> {
        return new Promise((resolve,reject) => {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(position => {
                if (position.coords) {
                    resolve({lat: position.coords.latitude, lng: position.coords.longitude});
                } else {
                    reject(new Error('browser did not return coordinates'));
                }
            });
        } else {
            reject(new Error('browser does not support geolocation api'));
        }

        });
    }
}

Angular 找到用户位置后如何加载组件

Angular how to load component after user location found

leaflet

angular