nativescript
использование собственного виджета

Использование surfaceView в ng2-TNS-Android: шаг за шагом

Например, вы хотите использовать surfaceView в ng2-nativescript. Поскольку у нас нет surfaceView в nativescript, мы должны использовать placeholder .

сначала мы должны импортировать требования:

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

затем добавьте местозаполнитель в ваш html-файл:

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

Добавьте этот метод в свой класс:

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

typescript не знает, что такое android и мы должны добавить файлы декларации платформы, следуйте этому ответу, чтобы добавить их.

из-за проблемы в текущей версии ng2-nativescript мы должны сделать дополнительную работу:

замените местозаполнитель на:

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

Импорт OnInit:

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

ваш класс должен реализовать OnInit

export class AppComponent implements OnInit

и добавьте эти строки в свой класс:

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

теперь у вас есть surfaceView в вашем приложении nativescript :)

Способы вызова SurfaceView

Например, вы хотите вызвать getHolder() :

добавьте переменную и загруженное событие в ваш заполнитель следующим образом:

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

и добавьте метод onLoaded в ваш класс:

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

ВНИМАНИЕ :

Не гарантируется, что свойство android ( element.android ) будет доступно в ngAfterViewInit поэтому ngAfterViewInit этого мы использовали loaded событие.

Использование surfaceView в ng2-TNS-Android: пример готовый

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>