角度:URL更改不会在第一次重新加载页面 [英] Angular: URL change doesn't reload page first time

问题描述

我知道这是一个不好的问题，我没有代码，但我希望有人可以对此有所了解.

I know this is a bad question, and I have no code but I was hoping someone can possible shed some light on this.

我有一个Angular网站.

I have an Angular site.

该站点加载不同产品的销售数据.产品名称显示在URL中

The site loads sales data for different products. The products names are shown in the URL

通过网站中指向不同产品的链接，该网站可以正常工作.

The site works fine from links in the site to the different products.

如果我直接使用产品名称更新URL，然后按Enter键，则不会重新加载网站.我必须选择Whoile URL，然后再次按Enter键才能重新加载页面.

If I update the URL directly with the product name and press enter and site does not reload. I have to select the whoile URL and press enter again for the page to reload.

谁能想到为什么会这样?

Can anyone think why this might be happening?

推荐答案

您需要一种方法来告知服务器您输入的URL是有效的Angular路由.因此，您需要将这些URL映射到index.html.

You need a way to tell the server that the URLs you are entering are valid Angular routes. And hence you need to map these URLs to index.html.

由于我在后端使用Java/Spring.这是我的方法.解决了这个问题:

Since I use Java/Spring at the back-end. Here is how I do it. This solves the problem:

@Controller
public class Routing {

    @RequestMapping({"/resources/**"}) 
    public String api(final HttpServletRequest request){
        String path = (String) request.getAttribute(
                HandlerMapping.PATH_WITHIN_HANDLER_MAPPING_ATTRIBUTE);
        return path;
    }

    @RequestMapping({ "", "/login", "/products/**" })
    public String gui() {
        return "forward:/index.html";
    }
}

这里，第一个方法仅返回以"/resources/**"开头的路径，因为在该路径下，我所有的REST API均可用.第二种方法转发到index.html以获取Angular路由.

Here the first method just returns the paths that starts with "/resources/**", because under this path, all my REST APIs are available. The second method forwards to index.html for the Angular routes.

请注意，转发到index.html不会更改浏览器地址栏上的URL，但会触发Angular进行控制.

Note that forwarding to index.html does not change the URL on the browser address bar, but it triggers Angular to take control.

这篇关于角度:URL更改不会在第一次重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！