I am currently working on integrating Wikitude Architect View in Angular 2 by referring to the code at this link. My goal is to implement this code in an Angular 2 compatible way.
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>
Currently, I have implemented the following in Angular 2:
@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>
The key part is converting these 3 lines into Angular 2 syntax:
var page = <View>args.object;
page.bindingContext = new Demo();
var architectView = page.getViewById<any>("architectView");
However, I am unsure about how to achieve this in Angular 2.