nativescript
देशी विजेट का उपयोग कर

Ng2-TNS-Android में सतह दृश्य का उपयोग करना: चरण दर चरण

उदाहरण के लिए, आप ng2-nativescript में सतह दृश्य का उपयोग करना चाहते हैं। जैसा कि हमारे पास 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;
}

टाइपस्क्रिप्ट को पता नहीं है कि android क्या है और हमें प्लेटफ़ॉर्म डिक्लेरेशन फ़ाइलों को जोड़ना चाहिए उन्हें जोड़ने के लिए इस उत्तर का पालन करें।

ng2-nativescript के वर्तमान संस्करण में एक समस्या के कारण हमें कुछ अतिरिक्त काम करना चाहिए:

प्लेसहोल्डर को इसमें बदलें:

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

आयात करें:

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

आपकी कक्षा को OnInit लागू करना चाहिए

export class AppComponent implements OnInit

और इन पंक्तियों को अपनी कक्षा में जोड़ें:

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

अब आपके पास अपने मूल एप्लिकेशन में एक सरफेस है :)

भूतल दृश्य के कॉल तरीके

उदाहरण के लिए आप getHolder() को कॉल करना चाहते हैं:

इस तरह अपने प्लेसहोल्डर के लिए एक चर और भरी हुई घटना जोड़ें:

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

और अपनी कक्षा में ऑन-लाईन विधि जोड़ें:

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

ध्यान :

यह गारंटी नहीं है कि android संपत्ति ( element.android ) में उपलब्ध हो जाएगा ngAfterViewInit तो हम इस्तेमाल किया loaded के बजाय इस बात का घटना।

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>