nativescript
natives Widget verwenden

Mit surfaceView in ng2-TNS-Android: Schritt für Schritt

Zum Beispiel möchten Sie surfaceView in ng2-nativescript verwenden. Da surfaceView in nativescript vorhanden ist, sollten wir placeholder .

Zuerst sollten wir die Anforderungen importieren:

import {Component} from "@angular/core";
import placeholder = require("ui/placeholder");
let application= require("application");

Fügen Sie dann den Platzhalter zu Ihrer HTML-Datei hinzu:

<Placeholder (creatingView)="creatingView($event)"></Placeholder>

Fügen Sie diese Methode Ihrer Klasse hinzu:

public creatingView(args: any) {
  var nativeView = new android.view.SurfaceView(application.android.currentContext);
  args.view = nativeView;
}

Typoskript weiß nicht , was ist android und wir sollten Plattform Deklarationsdateien folgen Sie diesem hinzufügen Antwort , um sie hinzuzufügen.

wegen eines Problems in der aktuellen Version von ng2-nativescript sollten wir einige zusätzliche Arbeit erledigen:

Ändern Sie den Platzhalter in:

<Placeholder  *ngIf="init" (creatingView)="creatingView($event)"></Placeholder>

OnInit importieren:

import {Component,OnInit} from "@angular/core";

Ihre Klasse sollte OnInit implementieren

export class AppComponent implements OnInit

und füge diese Zeilen zu deiner Klasse hinzu:

public init: boolean = false;
ngOnInit() {
    this.init = true;
}

Jetzt haben Sie eine Oberflächenansicht in Ihrer Nativescript-App :)

Rufen Sie Methoden von SurfaceView auf

Zum Beispiel möchten Sie getHolder() aufrufen:

Fügen Sie Ihrem Platzhalter eine Variable und ein geladenes Ereignis folgendermaßen hinzu:

  <Placeholder  #surface *ngIf="init" (creatingView)="creatingView($event)" (loaded)="onLoaded(surface)"></Placeholder>

und fügen Sie der Klasse die onLoaded-Methode hinzu:

 onLoaded(element){
  let mSurface = element.android;
  let holder =  mSurface.getHolder();
}

ACHTUNG :

Es ist nicht garantiert, dass die android Eigenschaft ( element.android ) in ngAfterViewInit verfügbar ist. ngAfterViewInit haben wir stattdessen ein loaded Ereignis verwendet.

Verwenden von surfaceView in ng2-TNS-Android: Vollständiges Beispiel

app.component.ts:

import {Component,OnInit} from "@angular/core";
import placeholder = require("ui/placeholder");
let application= require("application");

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent implements OnInit{

  public creatingView(args: any) {
    var nativeView = new android.view.SurfaceView(application.android.currentContext);
    args.view = nativeView;
  }

  onLoaded(element){
    let mSurface = element.android;
    let holder =  mSurface.getHolder();
  }

  public init: boolean = false;
    ngOnInit() {
        this.init = true;
    }
}

app.component.html:

<StackLayout>
   <Placeholder  #surface *ngIf="init" (creatingView)="creatingView($event)" (loaded)="onLoaded(surface)"></Placeholder>
</StackLayout>