javascript - 在 Angular 2 中实现 Wikitude

Question

我正在尝试使用此引用在 Angular 2 中实现 Wikitude 架构师 View https://github.com/jinhong-/nativescript-wikitudearchitectview/blob/master/demo/app/main-page.ts 我正在尝试以 Angular 2 方式实现这段代码

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>

到目前为止我已经:

@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>

主要部分是将这3行转换为Angular 2格式

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

但我不知道该怎么做。

Answer 1

首先，在您的 html 中您需要更改的文件 <ar:ArchitectView至<ArchitectView ，并且为了支持您可以将其添加到 main.ts :

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

其次，看一下这个页面:http://docs.nativescript.org/angular/tutorial/ng-chapter-6并搜索“#email”。所以在你看来添加:

<ArchitectView #architectView

在组件中:

@ViewChild("architectView") architectView: ElementRef;