prosource

위치가 변경되었을 때 경로 이름을 얻으려면 어떻게 해야 하나요?

probook 2023. 3. 4. 15:01
반응형

위치가 변경되었을 때 경로 이름을 얻으려면 어떻게 해야 하나요?

몇 가지 루트를 정의했습니다.

angular.module('myApp', [])
  .config('$routeProvider', function($routeProvider) {
    $routeProvider.when('/aaa', { templateUrl: '/111.html' })
                  .when('/bbb', { templateUrl: '/222.html'});
  });

또한 사용자가 경로를 변경할 때 경로 이름을 얻어야 합니다.

angular.module('myApp')
  .run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function(scope, current, pre) {
      // how to get current route name, e.g. /aaa or /bbb
      console.log('Current route name: ' + ???);
    }
  }]);

하지만 어떻게 구해야 할지 모르겠어요.나는 얻을 수 있다.templateUrl, 단, 루트명은 제외합니다.


갱신하다

보다 복잡한 사용 사례:

$routeProvider.when('/users/:id', { templateUrl: '/show_user.html' })

현재 경로가 다음과 같은 경우:

/users/12345

일치해야 합니다./users/:id단, 어떤 루트가 일치하는지 확인하고 루트 이름을 얻으려면 어떻게 해야 합니까?/users/:id?

$location 서비스를 삽입하고 해당 path() 함수를 사용할 수 있습니다.

angular.module('myApp')
  .run(['$rootScope','$location', '$routeParams', function($rootScope, $location, $routeParams) {
    $rootScope.$on('$routeChangeSuccess', function(e, current, pre) {
      console.log('Current route name: ' + $location.path());
      // Get all URL parameter
      console.log($routeParams);
    });
  }]);

기타 유용한 $location 메서드는 문서에서 찾을 수 있습니다.

갱신하다

현재 루트 파라미터의 배열을 원하는 경우 위와 같이 $routeParams 서비스를 삽입하기만 하면 됩니다.

주사할 필요 없어요$location그리고.$routeParams.
사용할 수 있습니다.current.$$route.originalPath

app.run(function ($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (e, current, pre) {
        console.log(current.$$route.originalPath);
    });
});

이것은 단순한 루트에 충분합니다(없음).:id등).

더 복잡한 사용 사례와 함께, 그것은 다시 돌아올 것이다./users/:id.
하지만 당신은 그 추출을 할 수 있다.:id에서 매개하다.current.params.id전체 경로로 교체합니다.

app.run(function ($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (e, current, pre) {
        var fullRoute = current.$$route.originalPath,
            routeParams = current.params,
            resolvedRoute;

        console.log(fullRoute);
        console.log(routeParams);

        resolvedRoute = fullRoute.replace(/:id/, routeParams.id);
        console.log(resolvedRoute);
    });
});

루트 스트링에 대해 정확히 무엇을 해야 하는지에 따라 Flek의 답변(예를 들어 여러 개의 파라미터가 있는 경우)과 비교하여 복잡하거나 루트 파라미터 이름에 얽매이지 않는 경우가 있습니다.

주의사항:당신의 코드에 빗장이 빠져있습니다.$on오픈 브레이스

2014/15/01 편집

보아하니$$Angular의 속성은 비공개로 하는 것이 좋습니다.코드에서 직접 호출하면 안 됩니다.

그다지 우아한 솔루션은 아니며, Chrome DevTools에서만 테스트했지만, 다음과 같이 작동합니다.

Object.getPrototypeOf($route.current) === $route.routes['/users/:id];

이 제품을 사용하고자 하는 다른 사용자는 교체하기만 하면 됩니다.'/users/:id'루트를 정의할 때 사용한 패턴과 일치합니다.

또한 다른 경로와 일치시키려면$route.routes['null']

면책사항:이것은 제가 찾은 회피책일 뿐이고, 저에게도 효과가 있습니다.이 동작은 문서화되어 있지 않으며 모든 시나리오에서 동작하는지 테스트하지 않았기 때문에 사용자의 책임 하에 사용하십시오.

제 생각에 당신은 쉽게 길을 찾을 수 있을 것 같아요.current

app.run(function ($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (e, current, pre) {
        console.log(current.originalPath); // Do not use $$route here it is private
    });
});

언급URL : https://stackoverflow.com/questions/15354329/how-to-get-the-route-name-when-location-changes

반응형