Angular에서 페이지 로드 후 앵커링하려면 스크롤

Angular에서 페이지 로드 후 앵커링하려면 스크롤

ng-click 이벤트를 설정하여 새 페이지를 로드한 후 페이지가 로드되면 해당 페이지의 앵커 포인트로 스크롤합니다.이 SO 게시물에 제안된 모든 솔루션을 시도해 보았지만 제대로 작동하지 않습니다.

이러한 솔루션의 대부분은 이미 로드된 페이지의 닻으로 스크롤하는 것을 중심으로 합니다.새 페이지가 로드된 후에 스크롤이 발생해야 합니다.

내 보기 코드는 다음과 같습니다.

<div class="see-jobs-btn" ng-click="$event.stopPropagation();goToResultJobs(r)">See Jobs</div>

이것은 '프로필 카드' 안에 있는 버튼을 나타냅니다.사용자가 카드를 클릭하면 프로필 페이지로 이동합니다.그러나 이 버튼을 클릭하면 해당 프로필 페이지의 #jobs 부분으로 이동해야 합니다(따라서 코드의 goToResultJobs(r)).

다음은 내 GoToResultJobs 방법입니다.

$scope.goToResultJobs = function(result) {
    var profileUrl = result.slug;
    window.location = profileUrl;
};

사용해 보았습니다.$anchorScroll그리고 닻에 하드코딩을 하고 있습니다.profileUrl, 하지만 둘 다 안 통합니다.앵귤러는 처음이라 뭘 놓쳤는지 모르겠네요

업데이트 1: $타임아웃을 사용하려고 합니다.

이것은 나의goToResultJobsmethod in my resultsCtrl 사용자가 버튼을 클릭할 때 트리거되는 method:

$scope.goToResultJobs = function(result) {
    var url = window.location + result.slug + '#jobs';
    location.replace(url);
};

그것은 짐을 싣습니다./name#jobspath. 이것은 ProfileCtrl을 아래와 같이 호출합니다.

app.controller('ProfileCtrl', ['$scope', '$http', '$timeout', '$location', '$anchorScroll',
function($scope, $http, $timeout, $location, $anchorScroll) {
    if(window.location.hash) {
        $timeout(function() {
            console.log('TEST');
            // $location.hash('jobs');
            // $location.hash('jobs');
            $anchorScroll();
        }, 1000);
    };
}]);

이 설정은 다음과 같이 작동하는 것 같습니다.TEST작업 단추를 클릭할 때만 콘솔에 나타나고 사용자가 프로필을 클릭할 때는 나타나지 않습니다.지금 제가 직면한 문제는 페이지가 로드되기 시작하고 URL 표시줄의 경로가 다음으로 변경된다는 것입니다./name#jobs, 페이지 로딩이 끝나기 전에jobsURL에서 제거됩니다.그러므로 언제$anchorScroll()가 호출되며, 해시에 스크롤할 앵커 태그가 없습니다.

그래서 지적한 바와 같이,$anchorScroll페이지가 렌더링된 후에 발생해야 합니다. 그렇지 않으면 앵커가 존재하지 않습니다.이는 다음을 사용하여 달성할 수 있습니다.$timeout().

$timeout(function() {
  $anchorScroll('myAnchor');
});

이 플렁커를 보실 수 있습니다.팝업 모드(출력 화면의 오른쪽 상단에 있는 작은 파란색 버튼)로 표시해야 합니다.

홀리, 이것은 간단히 추가하는 것으로 이루어질 수 있습니다.autoscroll="true"템플릿:

<div autoscroll="true" data-ng-include='"/templates/partials/layout/text-column.html"'></div>

문서화

나의 경우는fragment인에Router작동하지 않았습니다.ViewportScroller역시 작동하지 않았습니다.그들이 그랬더라도 - URL을 깨끗하게 유지하고 싶습니다.그래서, 이것을 사용했습니다.

(document.querySelector('.router-wrapper') as HTMLElement)?.scrollIntoView();

Angular Router의 Anchor Scrolling 활성화 방법 및 문제점

https://quandh19.medium.com/how-to-enable-anchor-scrolling-of-angular-router-in-the-right-way-42e9b19657b5

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
      anchorScrolling: 'enabled',
      //scrollOffset: [0, 64] // [x, y] takes into account your header
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Angular: https://stackblitz.com/edit/solution-anchor-scrolling?file=src%2Fapp%2Fproduct%2Fproduct.component.ts 에서 스크롤 작업 중

페이지가 로드된 후 네이티브 자바스크립트의 Element.scrollIntoView()를 사용할 수도 있습니까?

시도:

angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
  function ($scope, $location, $anchorScroll) {
      $scope.gotoBottom = function() {
      // set the location.hash to the id of
      // the element you wish to scroll to.
      $location.hash('bottom');

      $anchorScroll();
    };
}]);

여기 'bottom'은 스크롤할 HTML 요소의 ID입니다.

문서: https://docs.angularjs.org/api/ng/service/$anchorScroll

언급URL : https://stackoverflow.com/questions/30245910/scroll-to-anchor-after-page-load-in-angular