nativescript
usando widget nativo

Usando surfaceView en ng2-TNS-Android: paso a paso

Por ejemplo, desea utilizar surfaceView en ng2-nativescript. Como no tenemos surfaceView en nativescript, debemos usar el placeholder .

Primero debemos importar los requisitos:

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

a continuación, agregue el marcador de posición a su archivo html:

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

Agrega este método a tu clase:

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

typescript no sabe qué es android y debemos agregar los archivos de declaración de plataforma siguiendo esta Respuesta para agregarlos.

debido a un problema en la versión actual de ng2-nativescript, deberíamos hacer un trabajo adicional:

cambiar el marcador de posición a:

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

Importar OnInit:

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

su clase debe implementar OnInit

export class AppComponent implements OnInit

y agrega estas líneas a tu clase:

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

ahora tienes un surfaceView en tu aplicación nativescript :)

Métodos de llamada de SurfaceView

Por ejemplo, desea llamar a getHolder() :

agrega una variable y un evento cargado a tu marcador de posición como este:

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

y agrega el método onLoaded a tu clase:

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

ATENCION :

No se garantiza que la propiedad de android ( element.android ) esté disponible en ngAfterViewInit así que usamos un evento loaded lugar de eso.

Uso de surfaceView en ng2-TNS-Android: ejemplo completo listo

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>