Question

当前，我正在处理一个角度项目，我需要在将路由更改/ URL更改从一个页面路由到另一页面时触发一个事件（因为它不会刷新角度项目页面）。

我曾尝试在index.html页面中使用不同的情况，如下所示：

public class Main {

    public static void main(String[] args) {
        MyRunnable runnable = new MyRunnable("http://ninjaflex.com/");
        Thread thread = new Thread(runnable);
        thread.start();
        sleep(3000);
        thread.interrupt();
        System.out.println("Thread.interrupt() invoked.");
    }

    private static void sleep(long timeMilli) {
        try {
            Thread.sleep(timeMilli);
        } catch (Exception e) {

        }
    }
}

public class MyRunnable implements Runnable {

    private String website;

    MyRunnable(String website) {
        this.website = website;
    }

    @Override
    public void run() {
        URL url = createUrl();
        if (url != null) {
            while (!Thread.currentThread().isInterrupted()) {
                sleepOneSec();
                readFromUrl(url);
                System.out.println("Read from " + website);
            }
            System.out.println("Script: Interrupted, exiting.");
        }
    }

    private URL createUrl() {
        URL url = null;
        try {
            url = new URL(website);
        } catch (MalformedURLException e) {
            System.out.println("Wrong URL?");
        }
        return url;
    }

    private void sleepOneSec() {
        try {
            Thread.sleep(1000);
        } catch (Exception e) {
            System.out.println("Error sleeping");
        }
    }

    private void readFromUrl(URL url) {
        InputStream in = null;
        try {
            in = url.openStream();
        } catch (Exception e) {
            System.out.println("Exception while url.openStream().");
            e.printStackTrace();
        } finally {
            closeInputStream(in);
        }
    }

    private void closeInputStream(InputStream in) {
        try {
            in.close();
        } catch (IOException e) {
            System.out.println("Error while closing the input stream.");
        }
    }
}

我们还有其他解决方案可以在url更改时触发事件吗（我不想在angular中使用侦听器）。

Answer 1

您甚至可以在窗口

上实施 hashchange 来实现此目的

如果您使用的是jQuery，则此plugin可能会对您有所帮助。

或者在您的情况下检查纯JS代码

function hashHandler() {
    this.oldHash = window.location.hash;
    this.Check;

    var that = this;
    var detect = function() {
        if(that.oldHash != window.location.hash) {
            alert("HASH CHANGED - new has" + window.location.hash);
            that.oldHash = window.location.hash;
        }
    };

    this.Check = setInterval(function() { detect() }, 100);
}

var hashDetection = new hashHandler();

带路由器的纯角度演示示例：

import { Component, OnInit } from '@angular/core'; // I import Location so that I can query the current path
import { Location } from '@angular/common'; // I also import Router so that I can subscribe to events
import { Router } from '@angular/router'; 

@Component(
{ selector: 'app-top-nav', 
  templateUrl: './top-nav.component.html', 
  styleUrls: ['./top-nav.component.scss'] }
)
export class TopNavComponent implements OnInit { 
    route: string; 

    constructor(location: Location, router: Router) { // within our  constructor we can define our subscription
       // and then decide what to do when this event is triggered.
       // in this case I simply update my route string.
       router.events.subscribe((val) => { if(location.path() != '') { this.route = location.path(); } else { this.route = 'Home' } }); 
    } 

    ngOnInit() { 
    } 
}

上面的代码应该可以工作。

如何在URL更改时触发Javascript事件

1 个答案: