nativescript
za pomocą natywnego widgetu

Korzystanie z SurfaceView w ng2-TNS-Android: krok po kroku

Na przykład chcesz użyć SurfaceView w ng2-nativescript. Ponieważ nie mamy surfaceView w nativescript powinniśmy użyć placeholder .

najpierw powinniśmy zaimportować wymagania:

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

następnie dodaj symbol zastępczy do pliku HTML:

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

Dodaj tę metodę do swojej klasy:

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

maszynopis nie wie, co to jest android i powinniśmy dodać pliki deklaracji platformy. Postępuj zgodnie z poniższą odpowiedzią, aby je dodać.

z powodu problemu w obecnej wersji ng2-nativescript powinniśmy wykonać dodatkową pracę:

zmień symbol zastępczy na:

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

Importuj OnInit:

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

Twoja klasa powinna implementować OnInit

export class AppComponent implements OnInit

i dodaj te linie do swojej klasy:

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

teraz masz SurfaceView w swojej aplikacji do pisania :)

Wywołaj metody SurfaceView

Na przykład, chcesz wywołać getHolder() :

dodaj zmienne i załadowane zdarzenie do elementu zastępczego w następujący sposób:

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

i dodaj metodę onLoaded do swojej klasy:

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

UWAGA :

Nie ma gwarancji, że właściwość android ( element.android ) będzie dostępna w ngAfterViewInit więc ngAfterViewInit tego użyliśmy loaded zdarzenia.

Korzystanie z SurfaceView w ng2-TNS-Android: cały gotowy przykład

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>