위치가 변경되었을 때 경로 이름을 얻으려면 어떻게 해야 하나요?
몇 가지 루트를 정의했습니다.
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
'prosource' 카테고리의 다른 글
여러 테이블에서 카운트(*)를 선택합니다. (0) | 2023.03.04 |
---|---|
styled-components - html 또는 본문 태그에 스타일을 설정하는 방법 (0) | 2023.03.04 |
첫 번째 카테고리의 이름을 가져옵니다. (0) | 2023.03.04 |
패키지 서명이 이전에 설치된 버전과 일치하지 않습니다. (0) | 2023.03.04 |
reactjs에서 문서 키를 누릅니다. (0) | 2023.03.04 |