Google Maps NativescriptプラグインのAngular 2への接続

Question

Nativescript（https://github.com/dapriett/nativescript-google-maps-sdk）のGoogle MapsプラグインをAngular 2と{N} -Angularルーターで使用しようとしています。私はNativescriptだけで作業していますが、Angular 2とルータを追加すると、UIが表示されるのに失敗しています。

<Page>タグがAngular2 {N}コンポーネントテンプレートに入らないので、私は<maps:mapView>

をインスタンス化する<Page>にxmlns:maps="nativescript-google-maps-sdk"名前空間を使用することはできません{N}コンポーネントの基本ページはいくつかのガイダンスを提供しますそれは私が試した方法では動作しません：https://docs.nativescript.org/ui/ui-with-xml#user-interface-components

これを行うにはどのような考えですか？

app.component.tsあなたはelement-registry APIでmapViewタグ名を登録する必要があり

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

例：

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

このAPIはまだ文書化されていませんが、今後数週間で解決する必要があります。

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

これは私がTNSの追加プラグインを使用した後だった

：

Answer 2

は、私は、NS angualr 2と、このプラグインを使用すると、私は手動で下のルート/プラットフォーム/ adnroidでbuild.gradleファイルにアプリケーションIDを追加するために持っていたことが分かりましたnativescript-google-sdk

それ以外の場合、アプリケーションは正常にビルドされていますが、デプロイ時にデバイスやエミュレータにインストールされずにlogcatがチェックされても、nativescriptでbuild.gradleファイルを編集することはできません。今すぐ他の答えのコードを使用して素晴らしい作品