nativescript
usando il widget nativo

Utilizzo di surfaceView in ng2-TNS-Android: passo dopo passo

Ad esempio, si desidera utilizzare surfaceView in ng2-nativescript. Dato che non abbiamo surfaceView in nativescript dovremmo usare placeholder .

per prima cosa dovremmo importare i requisiti:

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

quindi aggiungi il segnaposto al tuo file html:

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

Aggiungi questo metodo alla tua classe:

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

dattiloscritto non sa cosa sia android e dovremmo aggiungere i file di dichiarazione della piattaforma segui questa risposta per aggiungerli.

a causa di un problema nella versione corrente di ng2-nativescript dovremmo fare del lavoro extra:

cambia il segnaposto a:

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

Importa OnInit:

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

la tua classe dovrebbe implementare OnInit

export class AppComponent implements OnInit

e aggiungi queste linee alla tua classe:

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

ora hai una surfaceView nella tua app nativescript :)

Chiama i metodi di SurfaceView

Ad esempio, si desidera chiamare getHolder() :

aggiungi un evento variabile e caricato al tuo segnaposto in questo modo:

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

e aggiungi il metodo onLoaded alla tua classe:

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

ATTENZIONE :

Non è garantito che la proprietà di android ( element.android ) sia disponibile in ngAfterViewInit quindi abbiamo utilizzato l'evento loaded anziché quello.

Utilizzo di surfaceView in ng2-TNS-Android: esempio completo

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>