nativescript
en utilisant un widget natif

Utiliser surfaceView dans ng2-TNS-Android: étape par étape

Par exemple, vous voulez utiliser surfaceView dans ng2-nativecript. Comme nous n’avons pas surfaceView dans nativescript, nous devons utiliser un placeholder .

Nous devons d'abord importer les exigences:

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

puis ajoutez l'espace réservé à votre fichier html:

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

Ajoutez cette méthode à votre classe:

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

TypeScript ne sait pas ce qui est android et nous devrions ajouter des fichiers de déclaration de plate-forme suivre cette réponse pour les ajouter.

En raison d'un problème dans la version actuelle de ng2-nativescript, nous devrions faire un travail supplémentaire:

changez l'espace réservé pour:

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

Importer OnInit:

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

votre classe devrait implémenter OnInit

export class AppComponent implements OnInit

et ajoutez ces lignes à votre classe:

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

maintenant vous avez un SurfaceView dans votre application nativescript :)

Méthodes d'appel de SurfaceView

Par exemple, vous voulez appeler getHolder() :

Ajoutez une variable et un événement chargé à votre espace réservé comme ceci:

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

et ajoutez la méthode onLoaded à votre classe:

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

ATTENTION :

Il n'est pas garanti que la propriété android ( element.android ) soit disponible dans ngAfterViewInit , nous avons donc utilisé l'événement loaded au lieu de cela.

Utiliser surfaceView dans ng2-TNS-Android: exemple tout prêt

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>