在 ng2-TNS-Android 中逐步使用 surfaceView

例如，你想在 ng2-nativescript 中使用 surfaceView。由於我們在 nativescript 中沒有 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 事件而不是那個。