用角2连接Google插件

Question

我正在尝试使用带有角2的(https://github.com/dapriett/nativescript-google-maps-sdk)和{N}-Angular路由器。我让它在Nativescript中工作，但是一旦我添加了角2和路由器，我就无法让地图显示在UI中。

由于<Page>标记不会进入Angular2 {N}组件模板，所以不能使用<Page>上的xmlns:maps="nativescript-google-maps-sdk"命名空间实例化<maps:mapView>

{N}组件基础页面给出了一些指导，但它不能像我尝试过的那样工作：https://docs.nativescript.org/ui/ui-with-xml#user-interface-components

你知道该怎么做吗？

app.component.ts

import {Component} from "angular2/core";
import {RouteConfig} from "angular2/router";
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router";
import {HomeComponent} from "./pages/home/home.component";

@Component({
    selector: "app-main",
    directives: [NS_ROUTER_DIRECTIVES],
    providers: [NS_ROUTER_PROVIDERS],
    template: "<page-router-outlet ></page-router-outlet>"
})
@RouteConfig([
    { path: "/home", component: HomeComponent, as: "Home", useAsDefault: true },
])
export class AppComponent {
}

home.html

<stack-layout orientation="vertical">
    <label [text]="message"></label>
    <mapView [latitude]="latitude" [longitude]="longitude"
                  [zoom]="zoom" [bearing]="bearing"
                  [tilt]="tilt" (mapReady)="OnMapReady"
                  (markerSelect)="onMarkerSelect"
                  (cameraChanged)="onCameraChanged">
    </mapView>
</stack-layout>

home.component.ts

import {Component} from "angular2/core";
var geolocation = require("nativescript-geolocation");
var mapsModule = require("nativescript-google-maps-sdk");
exports.mapView = mapsModule.MapView; //Doesn't work
exports.mapView = new mapsModule.MapView(); //Doesn't work
exports.mapView = mapsModule; //Doesn't work

@Component({
    selector: "home",
    templateUrl: "pages/home/home.html",
})
export class HomeComponent {
    public message:string = "Message set.";
    public latitude:number = 30.0;
    public longitude:number = -100.0;
    public zoom:number = 10;
    public bearing:number = 0;
    public tilt:number = 0;

    constructor() {
        this.message = "Home constructed.";
    }
    OnMapReady(args) { }
    onMarkerSelect(args) { }
    onCameraChanged(args) { }
}

Answer 1

您需要向mapView API注册element-registry标记名，例如：

https://github.com/NativeScript/nativescript-angular/blob/master/src/nativescript-angular/element-registry.ts#L70-L105

这个API还没有文档化，但是我们应该在接下来的几周内解决这个问题。

Answer 2

我发现，使用这个带有ns angualr 2的插件，我必须手动将applicationID添加到根/platforms/adnroid中的build.gradle文件中：

android{
    defaultConfig{
        applicationId "org.nativescript.my_app_name"

这是在我使用tns插件，添加本地文本-google之后。

否则，应用程序正在成功构建，但是当部署时不会在设备或模拟器上安装并检查logcat，我发现这很奇怪，因为本地脚本不会让您编辑build.gradle文件。现在，它很好地使用了其他答案的代码。