如何在angular2中使用nativescript的WebView？答案

【问题标题】：How to use nativescript's WebView in angular2?如何在angular2中使用nativescript的WebView？
【发布时间】：2016-06-09 19:15:43
【问题描述】：

我正在尝试在我的页面上插入 web-view 并收听“loadFinishedEvent”... 但为此，我需要在我的 component （ts 文件）中找到 webview，通过 nativescript 方式我需要用标签包装我的 xml（UI）：

<Page xmlns="http://schemas.nativescript.org/tns.xsd

但是这样做我得到了这个错误： “TypeError: this.page.frame._getNavBarVisible 不是函数”，并且没有 Page 标签，我已经尝试过一些方法但没有成功...

我也没有找到任何样本，谁能帮助我？

【问题讨论】：

标签： angular nativescript angular2-nativescript

【解决方案1】：

包含类实现的 .ts 文件

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

@Component({
selector: "Date",
templateUrl: "myPage.html", //here is your reference to html page
})

export class Angular2WebView {
//any class function
}

您的 html 文件 myPage.html

<GridLayout>
    <WebView id="webView" url="http://www.google.com" >
    </WebView>
</GridLayout>

了解更多信息。参考这里Nativescript bare webview doesnt seem to work

【讨论】：

【解决方案2】：

使用WebView Nativescript/Android的文档的好链接

html:

 <WebView #webview [src]="url"></WebView>

后端代码：

import {Component, OnInit} from "@angular/core";
import {WebView, LoadEventData} from "ui/web-view";

@Component({
    selector: 'basic-web-view-component',
    templateUrl: //see html above
})

export class BasicWebViewComponent implements OnInit {

    public url="https://www.google.com";
    @ViewChild("webview") webview: WebView;

    ngOnInit() {

        this.webview.on(WebView.loadFinishedEvent, function (args: LoadEventData) {
             console.log("loadFinishedEvent called");
        });
    }
}

注意：WebView 似乎需要在 GridView 中使用宽度/高度属性调整大小，请参阅上面的文档参考。它不会根据内容动态增长。

【讨论】：

组件代码不是后端代码，而是前端。
是的 backend 是一个不幸的短语……但是 HTNL fie 后面的代码文件通常被称为 backing code。什么是更好的术语？
从我们的开发来说，我喜欢称这种代码为“前端的后端”。这似乎有助于非开发人员了解 Web 前端的复杂性如何增长。

【解决方案3】：

我用下面的代码解决了：

<WebView [src]="url" (loadFinished)="loadFinished($event)"></WebView>

重要提示：删除 <Page> 标签（不应在 Nativescript/Angular 2 中使用）。

更多信息：github issue

【讨论】：

谢谢，您还可以使用 ViewChild 装饰器将自定义设置应用到无法正常工作的原生组件，不知道为什么..
在 GridViews 中封装你的 webview，否则它们可能不会显示在 iOS 设备上

【解决方案4】：

您是否尝试过使用 getViewById 方法在加载时使用 eventargs 来查找控件。你可以在这里找到更多信息 - https://docs.nativescript.org/ui/ui-with-xml

【讨论】：

不起作用，因为这样做的“角度方式”......我已经通过这样做来解决它：并删除“Page”标签（不应与 nativescript/Angular 2 一起使用更多信息：link
@RichardSilveira 你能把你的评论扩展成答案吗