nativescript
ネイティブウィジェットを使用して

ng2-TNS-AndroidでのsurfaceViewの使用：ステップバイステップ

たとえば、ng2-nativescriptでsurfaceViewを使用したいとします。 surfaceViewでsurfaceViewを使用していないため、 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;
}

今あなたはあなたのnativescriptアプリでsurfaceViewを持っています:)

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で利用できることは保証されていないので、代わりにloadedイベントを使用しました。

ng2-TNS-AndroidでのsurfaceViewの使用：完全な例

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>