如何在angular2中使用nativescript的WebView？

我想插入我的页面上的WebView，并听取了“loadFinishedEvent” ...... 但做到这一点，我需要找到的WebView在我组件（TS文件），通过nativescript这样我需要用一个标签来包装我的XML（UI）：如何在angular2中使用nativescript的WebView？

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

但这样做我得到这个错误： “类型错误：this.page.frame._getNavBarVisible不是一个函数”，并没有页面标记我已经尝试了一些方法，但不成功...

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

来源

2016-06-09 Richard Lee

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

来源

2016-06-09 21:11:56

不行的，因为 “角办法” 的做... 我已经做解决它： <的WebView [SRC = “URL”（loadFinished） =“loadFinished（$ event）”> 删除“Page”标签（不应该与nativescript/Angular一起使用2 更多信息：[link]（https://github.com/NativeScript/） nativescript-angular/issues/281） –

@RichardSilveira您可以将您的评论扩展为答案 – ahalls

良好的链接，文档使用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中调整大小，请参阅上面的文档参考。它不会基于内容动态增长。

来源

2016-11-05 17:35:23 ahalls

组件代码不是后端代码，而是前端代码。 – Sebas

是后端是一个不幸的短语......但HTNL fie背后的代码文件通常称为后援代码。什么是更好的术语？ – ahalls

从我们的开发，我喜欢称这种代码为“前端的后端”。这似乎有助于非开发人员了解Web前端的复杂性。 – Aaron

你的.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

来源

2016-12-06 14:23:37 Dlucidone

我解决了它与下面的代码：

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

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

更多信息：github issue

来源

2016-12-15 16:41:02

谢谢，还可以使用ViewChild装饰器将自定义设置应用于不是原料的原生组件，不知道为什么。 –

如何在angular2中使用nativescript的WebView？

回答

相关问题