nativescript
med inbyggd widget

AnvändafaceView i ng2-TNS-Android: steg för steg

Till exempel vill du användafaceView i ng2-nativescript. Eftersom vi inte har surfaceView i nativescript bör vi använda placeholder .

först bör vi importera kraven:

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

lägg sedan till platshållaren i din html-fil:

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

Lägg till den här metoden i din klass:

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

typskript vet inte vad som är android och vi bör lägga till plattformsdeklarationsfiler följ detta svar för att lägga till dem.

på grund av ett problem i den aktuella versionen av ng2-nativescript bör vi göra lite extra arbete:

ändra platshållaren till:

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

Importera OnInit:

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

din klass ska implementera OnInit

export class AppComponent implements OnInit

och lägg till dessa rader i din klass:

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

nu har du en SurfaceView i din nativescript-app :)

Samtalsmetoder för SurfaceView

Till exempel vill du ringa getHolder() :

lägg till en variabel och laddad händelse till din platshållare så här:

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

och lägg till onLoaded-metoden i din klass:

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

OBSERVERA :

Det är inte garanterat att android ( element.android ) kommer att finnas tillgänglig i ngAfterViewInit så vi använde loaded händelse istället för det.

AnvändafaceView i ng2-TNS-Android: helt klart exempel

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>