在 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 事件而不是那个。