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 app에 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();
}

주의 :

ngAfterViewInit 에서 android 속성 ( element.android )을 사용할 수 있다는 보장이 없으므로 대신 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>