How to use nativescript's WebView in angular2?

前端 未结 4 1281
抹茶落季
抹茶落季 2021-01-15 14:50

I\'m trying to insert a web-view on my page and listen the \'loadFinishedEvent\'... But for do this, i need to find the webview in my component

相关标签:
4条回答
  • 2021-01-15 14:59

    Have you tried to use the eventargs on load with the method getViewById to find a control. You can find more information here - https://docs.nativescript.org/ui/ui-with-xml

    0 讨论(0)
  • 2021-01-15 15:14

    Good link for documentation for using WebView Nativescript/Android

    html:

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

    backend code:

    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");
            });
        }
    }
    

    Note: that it seems that WebView needs to sized with width/height attributes are in a GridView, see the docs reference above. It won't dynamically grow based on content.

    0 讨论(0)
  • 2021-01-15 15:15

    I solved it with the following code:

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

    Important: remove the <Page> tag (should not be used within Nativescript/Angular 2).

    More info: github issue

    0 讨论(0)
  • 2021-01-15 15:21

    Your .ts file containing class implementation

    import { Component } from "@angular/core";
    
    @Component({
    selector: "Date",
    templateUrl: "myPage.html", //here is your reference to html page
    })
    
    export class Angular2WebView {
    //any class function
    }
    

    Your html file myPage.html

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

    for more info. refer here Nativescript bare webview doesnt seem to work

    0 讨论(0)
提交回复
热议问题