asp.net core 2.0 spa angular + google map答案

【问题标题】：asp.net core 2.0 spa angular + google mapasp.net core 2.0 spa angular + google map
【发布时间】：2018-02-15 17:37:17
【问题描述】：

如何在 asp.net core spa angular 应用程序中实现谷歌地图，我在 index.cshtml 中包含脚本，但从 angular 访问它时出错。

import { Component } from '@angular/core';
declare var google: any;
@Component({
    selector: 'home',
    templateUrl: './home.component.html'
})
export class HomeComponent {
    constructor() {
        var mapProp = {
            center: new google.maps.LatLng(51.508742, -0.120850),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    }
}

索引.html

@{
    ViewData["Title"] = "Home Page";
}

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR-KEY]" async defer></script>
<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
    <script src="~/dist/main-client.js" asp-append-version="true"></script>
}

处理请求时发生未处理的异常。

NodeInvocationException: Uncaught (in promise): ReferenceError: google 未定义 ReferenceError: google is not defined at new HomeComponent (F:\yo\ClientApp\dist\main-server.js:16281:25)

【问题讨论】：

错误？那是什么。
处理请求时发生未处理的异常。 NodeInvocationException: Uncaught (in promise): ReferenceError: google is not defined ReferenceError: google is not defined at new HomeComponent (F:\yo\ClientApp\dist\main-server.js:16281:25)
您正在加载与AppComponent 相关的<app> </app>，因此需要在AppComponent 中获取declare var google: any google 并将其存储在本地存储中并在您想要的任何地方使用它。
你能帮我举个例子吗？
也许这个question 会有所帮助

标签： asp.net angular google-maps .net-core

【解决方案1】：

.cshtml

<app asp-prerender-module="ClientApp/dist/main-server"
         asp-prerender-data='@ViewData["token"]' >Loading...</app>//Storing 

    <script src="~/dist/vendor.js" asp-append-version="true"></script>
    @section scripts {
        <script src="~/dist/main-client.js" asp-append-version="true"></script>
    }

boot.server.ts

setImmediate(() => {
                    resolve({
                        html: state.renderToString(),

                        globals: {
                            tokenData: params.data
                        }

                    });

app.component.ts

declare var tokenData: any;
@Component({..})
export class AppComponent implements OnInit{
 ngOnInit() {
 let accessToken = tokenData;
 localStorage.setItem('token', accessToken);
     }
}

【讨论】：