Verkabelung von Google Maps Nativescript-Plugin mit Angular 2

Question

Ich versuche, das Google Maps-Plugin für Nativescript (https://github.com/dapriett/nativescript-google-maps-sdk) mit Angular 2 und dem {N} -Angular-Router zu verwenden. Ich habe es in nur Nativescript arbeiten, aber sobald ich Angular 2 und den Router hinzufügen, bekomme ich nicht die Karte auf der Benutzeroberfläche angezeigt werden.

Da ein <Page> Tag geht nicht in eine Angular2 {N} Komponentenvorlage, kann ich nicht verwenden, um die xmlns:maps="nativescript-google-maps-sdk" Namespace auf dem <Page> die <maps:mapView>

Die {N} Komponente Grundlagen Seite einige Hinweise gibt zu instanziiert aber es funktioniert nicht in der Art, wie ich es versucht habe: https://docs.nativescript.org/ui/ui-with-xml#user-interface-components

Irgendeine Idee auf dem richtigen Weg, dies zu tun ist?

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

Sie müssen den mapView Tag-Namen mit dem element-registry API registrieren zB:

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

Diese API ist noch nicht dokumentiert, aber wir sollten dieses Problem in den kommenden Wochen beheben.

Answer 2

Ich fand, dass die Verwendung dieses Plugin mit ns angualr 2 musste ich manuell die applicationID auf die build.gradle Datei in root/platforms/Adnroid unter hinzufügen:

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

Das war, nachdem ich verwendet tns hinzufügen Plugin nativescript-google-sdk.

Sonst wurde die App erfolgreich aufgebaut, aber wenn sie nicht auf dem Gerät oder Emulator installiert wird und das Logcat überprüft, finde ich das merkwürdig, da nativescript die build.gradle-Datei nie bearbeiten würde. Jetzt funktioniert es gut mit dem Code von anderen Antwort