Angular에서 동일한 페이지 내 앵커 설정 방법

매우 간단한 이야기이지만, 보통의 방법이라면(이하) 움직이지 않는다.

<a href="#abc">ジャンプ元</a>

<span id="abc">ジャンプ先</span>

혹은 https://도메인명/#abc로 점프해 버린다.

ActivateRouter를 사용하는 방법이 있는 것 같지만 멘도쿠사이~~~~

그리고 가장 쉬운 방법. ngx-page-scroll 모듈을 설치합니다.
※단, 그 전에 core의 설치가 필요

npm install ngx-page-scroll-core --save
npm install ngx-page-scroll --save

그렇다면 평소처럼 app.module.ts에 추가.

import { NgxPageScrollCoreModule } from 'ngx-page-scroll-core';
import { NgxPageScrollModule } from 'ngx-page-scroll';

@NgModule({
    imports: [
        /* Other imports here */
        NgxPageScrollCoreModule
        NgxPageScrollModule
        ]
})

이것만.
실제로 사용하는 페이지의 컴포넌트 쪽, ***-component.ts 쪽은 전혀 만질 필요없다.

그리고 HTML을 ...

<a pageScroll href="#abc">ジャンプ元</a>

<span id="abc">ジャンプ先</span>

이렇게 점프 원래 쪽에 pageScroll 의 단어 하나 넣는 것 뿐.

아 ... 쉽고 좋았다

※ 스크롤 스피드 등 세세한 조정을 하고 싶은 경우는 ngx-page-scroll-core를 인스톨 할 필요가 있습니다.

우리 환경 Angular7

package.json

//package.json
{
  "name": "benzoinfojapan",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/cdk": "^7.3.4",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/fire": "^5.1.3",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^7.3.4",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/pwa": "^0.13.5",
    "@angular/router": "~7.1.0",
    "@angular/service-worker": "~7.1.0",
    "core-js": "^2.5.4",
    "firebase": "^5.11.1",
    "firebase-admin": "^7.3.0",
    "firebase-functions": "^2.3.1",
    "firebaseui": "^3.6.1",
    "firebaseui-angular": "^3.4.1",
    "hammerjs": "^2.0.8",
    "igniteui-angular": "^7.3.0",
    "ngx-page-scroll": "^7.0.0",
    "ngx-page-scroll-core": "^7.0.0",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.9",
    "@angular/cli": "~7.1.4",
    "@angular/compiler-cli": "^7.2.15",
    "@angular/language-service": "~7.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

참고 : ngx-page-scroll