如果我的网址中包含路由参数，那么散列连接重新路由的角 [英] If my url contains route parameters, then hash links reroute in angular

问题描述

如果我有一个层次路线，然后散列环节的工作作为一个没有重路由的预期。不过我有一些网址是国家/ KH，如果我尝试使用哈希标签，如国家/ KH＃项目，页面重新路由，这是很烦人的。

If I have a one level route, then the hash links work as expected with no rerouting. However I have some urls that are country/kh and if I try using hash tags such as country/kh#projects, the page reroutes, which is very annoying.

所以，如果IM在页面国家和点击链接#developing，那么页面将滚动没有重路由，这是希望#developing。如果我在页面国家/ KH和我点击#projects，页面将重新路由，然后滚动到#projects;我不希望发生的重新路由。

So, if im on page countries and click the link #developing, then the page will scroll to #developing without rerouting, which is desired. If I'm on page country/kh and I click #projects, the page will reroute, then scroll to #projects; I don't want the rerouting to occur.

问题只发生本质第1页/参数＃锚链接，而不是简单的pageA的＃锚。

The issue only occurs for links of the nature page1/parameter#anchor, not for simple pageA#anchor.

推荐答案

这是很难回答你的问题，没有任何code样品或plunker。我实现了一个plunker code（ http://plnkr.co/edit/oflB21 p = preVIEW ），试图重现这个问题，但你可以看到我不能重现该问题。即您可以轻松地来回浏览页面，例如两个不同部分之间＃之间/国家/意大利＃坝段-4和＃/国家/意大利＃坝段-1，没有任何页面加载或改。请在以下plunker看看我的工作的例子。这最有可能是发生在你身上，由于缺少哈希爆炸或斜线或细节这样的。

It is very difficult to answer your question without any code samples or a plunker. I implemented a plunker code ( http://plnkr.co/edit/oflB21?p=preview ) to try to reproduce this issue but as you can see I could not reproduce the issue. i.e. You can easily navigate back and forth between two different sections of the page, e.g. between #/Country/Italy#Section-4 and #/Country/Italy#Section-1, without any page load or reroute. Please check out my working example at the following plunker. This most probably is happening to you due to a missing hash bang or forward slash or details like that.

HTML片段的主页：

Html snippet for home page:

<ul>
    <li><a href="#/Country">Go to /Country</a></li>
    <li><a href="#/Country/US">Go to /Country/US</a></li>
    <li><a href="#/Country/Italy#Section-4">Go to /Country/Italy#Section-4</a></li>
    <li><a href="#/Country/Canada#Section-8">Go to #/Country/Canada#Section-8</a></li>
</ul>

HTML代码段为国家页面：

Html snippet for country page:

<div id="Section-1" class="section pink">
    Section 1
    <div ng-if="country">
        <a ng-href="#/Country/{{country}}#Section-8">Go to /Country/{{country}}#Section-8</a>
    </div>
    <div ng-if="!country">
        <a ng-href="#/Country#Section-8">Go to /Country#Section-8</a>
    </div>
</div>

所有的Java脚本code：

all the java script code:

var app = angular.module("app", ["ngRoute"]);

app.config(["$routeProvider", "$locationProvider", 
    function ($routeProvider, $locationProvider) 
{
    $routeProvider
    .when("/",
    {
        templateUrl: "./home-page.html",
        caseInsensitiveMatch: true,
    })
    .when("/Home",
    {
        templateUrl: "./home-page.html",
        caseInsensitiveMatch: true,
    })
    .when("/Country",
    {
        templateUrl: "./country-page.html",
        caseInsensitiveMatch: true,
    })
    .when("/Country/:country",
    {
        templateUrl: "./country-page.html",
        caseInsensitiveMatch: true,
    })

}]);


countryController.$inject = ["$scope", "$routeParams", "$location", "$anchorScroll"];
function countryController($scope, $routeParams, $location, $anchorScroll) {

    $scope.country = $routeParams.country;


    if (!!$location.$$hash)
    {
        $location.hash($location.$$hash);
        $anchorScroll();
    }

}

这篇关于如果我的网址中包含路由参数，那么散列连接重新路由的角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！