Mettre en œuvre dans Wikitude angulaire 2

Question

Je suis en train de mettre en œuvre Wikitude Architect Voir en Angulaire 2 en utilisant cette référence https://github.com/jinhong-/nativescript-wikitudearchitectview/blob/master/demo/app/main-page.ts Je suis en train de mettre en œuvre ce morceau de code dans une 2 voies angulaire

import * as app from 'application'; 
 
import * as platform from 'platform'; 
 
import { Demo } from "./main-view-model"; 
 
import { View } from "ui/core/view"; 
 
import * as frameModule from 'ui/frame' 
 

 
function pageLoaded(args) { 
 
    var page = <View>args.object; 
 
    page.bindingContext = new Demo(); 
 
    var architectView = page.getViewById<any>("architectView"); 
 
    console.log('pageLoaded'); 
 
}

<page xmlns="http://schemas.nativescript.org/tns.xsd" 
 
     xmlns:ar="nativescript-wikitudearchitectview" 
 
     loaded="pageLoaded"> 
 
     <GridLayout rows="*, auto"> 
 
     <ar:ArchitectView id="architectView" urlString="http://10.20.30.79:8888" urlLoaded='urlLoaded' urlLoadError='urlLoadError' urlInvoked='urlInvoked'/> 
 
     </GridLayout> 
 
</page>

jusqu'à présent j'ai:

@Component({ 
 
    selector: "my-app", 
 
    templateUrl: "app.xml" 
 
}) 
 
export class AppComponent implements OnInit{ 
 
    
 
    ngOnInit() { 
 
    var page = <View>args.object; 
 
    page.bindingContext = new Demo(); 
 
    var architectView = page.getViewById<any>("architectView"); 
 
    console.log('pageLoaded'); 
 
    }

 <GridLayout rows="*, auto"> 
 
     <ar:ArchitectView id="architectView" urlString="http://10.20.30.79:8888" urlLoaded='urlLoaded' urlLoadError='urlLoadError' urlInvoked='urlInvoked'> 
 
     </ar:ArchitectView> 
 
     <Button row="1" text="hello"></Button> 
 
     </GridLayout>

La partie principale est de convertir ces 3 lignes dans le format angulaire 2

var page = <View>args.object; 
page.bindingContext = new Demo(); 
var architectView = page.getViewById<any>("architectView"); 

Mais je ne sais pas comment je peux le faire.

Answer 1

Tout d'abord, dans votre fichier html vous devrez changer <ar:ArchitectView-<ArchitectView, et de soutenir que vous pouvez ajouter à main.ts:

var architectView = require("nativescript-wikitudearchitectview"); 
registerElement("ArchitectView",() => architectView.ArchitectView); 

Deuxièmement, jetez un oeil à cette page: http://docs.nativescript.org/angular/tutorial/ng-chapter-6 et recherche pour '#email'. Donc, selon vous, d'ajouter:

<ArchitectView #architectView 

Et dans le composant:

@ViewChild("architectView") architectView: ElementRef;