Angular2 Маршрутизація з Hashtag для прив’язки сторінки

Я хочу додати кілька посилань на мою сторінку Angular2, які при натисканні перейдуть на певні позиції на цій сторінці, як, наприклад, звичайні хештеги. Тож посилання були б чимось схожими

/users/123#userInfo
/users/123#userPhoto
/users/123#userLikes

тощо.

Я не думаю, що мені потрібна HashLocationStrategy, оскільки я нормально використовую звичайний спосіб Angular2, але якщо я додаю безпосередньо, посилання насправді перейде до кореня, а не десь на одній сторінці. Будь-який напрямок вдячний, дякую.

Оновлення

Зараз це підтримується

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

Додайте нижче код до свого компонента, щоб прокрутити

  import {ActivatedRoute} from '@angular/router'; // <-- do not forget to import

  private fragment: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
  }

  ngAfterViewInit(): void {
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) { }
  }

Оригінал

Це відомий випуск та відстежується на https://github.com/angular/angular/isissue/6595

Хоча відповідь Гюнтера є правильною, вона не охоплює "стрибок на" частину тега прив’язки .

Тому додатково до:

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

... у компоненті (батьківському), де вам потрібна поведінка "перейти до", додайте:

import { Router, NavigationEnd } from '@angular/router';

class MyAppComponent {
  constructor(router: Router) {

    router.events.subscribe(s => {
      if (s instanceof NavigationEnd) {
        const tree = router.parseUrl(router.url);
        if (tree.fragment) {
          const element = document.querySelector("#" + tree.fragment);
          if (element) { element.scrollIntoView(true); }
        }
      }
    });

  }
}

Зверніть увагу, що це рішення ! Дотримуйтесь цього випуску github для подальших оновлень. Кредити Віктору Савкіну за надання рішення!

Вибачте, що відповіли на це трохи пізно; У Документації по кутовому маршрутизації є заздалегідь визначена функція, яка допомагає нам в маршрутизації з хештегом до якоря сторінки, тобто anchorScrolling: 'увімкнено'

Крок 1: - Спочатку імпортуйте RouterModule у файл app.module.ts: -

imports:[ 
    BrowserModule, 
    FormsModule,
    RouterModule.forRoot(routes,{
      anchorScrolling: 'enabled'
    })
  ],

Крок 2: - Перейдіть на сторінку HTML, створіть навігацію та додайте два важливі атрибути, як [routerLink] та фрагмент для відповідності відповідних ідентифікаторів Div : -

<ul>
    <li> <a [routerLink] = "['/']"  fragment="home"> Home </a></li>
    <li> <a [routerLink] = "['/']"  fragment="about"> About Us </a></li>
  <li> <a [routerLink] = "['/']"  fragment="contact"> Contact Us </a></li>
</ul>

Крок 3: - Створіть розділ / div, зіставивши ім'я ідентифікатора з фрагментом : -

<section id="home" class="home-section">
      <h2>  HOME SECTION </h2>
</section>

<section id="about" class="about-section">
        <h2>  ABOUT US SECTION </h2>
</section>

<section id="contact" class="contact-section">
        <h2>  CONTACT US SECTION </h2>
</section>

Для довідки, я додав приклад нижче, створивши невелику демонстрацію, яка допомагає вирішити вашу проблему.

Демо: https://routing-hashtag-page-anchors.stackblitz.io/

Трохи пізно, але ось я знайшов відповідь, що працює:

<a [routerLink]="['/path']" fragment="test" (click)="onAnchorClick()">Anchor</a>

І в компоненті:

constructor( private route: ActivatedRoute, private router: Router ) {}

  onAnchorClick ( ) {
    this.route.fragment.subscribe ( f => {
      const element = document.querySelector ( "#" + f )
      if ( element ) element.scrollIntoView ( element )
    });
  }

Вищезгадане не автоматично прокручує до подання, якщо ви вже приземляєтесь на сторінку з якорем, тому я використав рішення вище в своєму ngInit, щоб воно могло працювати і з цим:

ngOnInit() {
    this.router.events.subscribe(s => {
      if (s instanceof NavigationEnd) {
        const tree = this.router.parseUrl(this.router.url);
        if (tree.fragment) {
          const element = document.querySelector("#" + tree.fragment);
          if (element) { element.scrollIntoView(element); }
        }
      }
    });
  }

Не забудьте імпортувати маршрутизатор, ActivateRoute та NavigationEnd на початку вашого компонента, і все має бути добре.

Джерело

Жодна з попередніх відповідей не працювала для мене. В останніх зусиллях рову я спробував у своєму шаблоні:

<a (click)="onClick()">From Here</a>
<div id='foobar'>To Here</div>

З цим у моєму .ts:

onClick(){
    let x = document.querySelector("#foobar");
    if (x){
        x.scrollIntoView();
    }
}

І це працює, як очікувалося, для внутрішніх посилань. Тут фактично не використовуються якірні теги, щоб вони взагалі не торкалися URL-адреси.

Рішення вище для мене не працювали ... Цей зробив це:

Спочатку підготуйтеся MyAppComponentдо автоматичної прокрутки в ngAfterViewChecked () ...

import { Component, OnInit, AfterViewChecked } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component( {
   [...]
} )
export class MyAppComponent implements OnInit, AfterViewChecked {

  private scrollExecuted: boolean = false;

  constructor( private activatedRoute: ActivatedRoute ) {}

  ngAfterViewChecked() {

    if ( !this.scrollExecuted ) {
      let routeFragmentSubscription: Subscription;

      // Automatic scroll
      routeFragmentSubscription =
        this.activatedRoute.fragment
          .subscribe( fragment => {
            if ( fragment ) {
              let element = document.getElementById( fragment );
              if ( element ) {
                element.scrollIntoView();

                this.scrollExecuted = true;

                // Free resources
                setTimeout(
                  () => {
                    console.log( 'routeFragmentSubscription unsubscribe' );
                    routeFragmentSubscription.unsubscribe();
                }, 1000 );

              }
            }
          } );
    }

  }

}

Потім перейдіть до my-app-routeнадсилання prodIDхештегів

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component( {
   [...]
} )
export class MyOtherComponent {

  constructor( private router: Router ) {}

  gotoHashtag( prodID: string ) {
    this.router.navigate( [ '/my-app-route' ], { fragment: prodID } );
  }

}

Усі інші відповіді будуть працювати над кутовою версією <6.1. Але якщо у вас є остання версія, то вам не потрібно буде робити цих потворних хак, оскільки Angular вирішив проблему.

ось посилання на випуск

Все, що вам потрібно буде зробити, це встановити scrollOffsetпараметр другого аргументу RouterModule.forRootметоду.

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

Використовуйте це для модуля маршрутизатора в app-routing.module.ts:

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: true,
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled',
    scrollOffset: [0, 64]
  })],
  exports: [RouterModule]
})

Це буде у вашому HTML:

<a href="#/users/123#userInfo">

У файлі html:

<a [fragment]="test1" [routerLink]="['./']">Go to Test 1 section</a>

<section id="test1">...</section>
<section id="test2">...</section>

У файлі ts:

export class PageComponent implements AfterViewInit, OnDestroy {

  private destroy$$ = new Subject();
  private fragment$$ = new BehaviorSubject<string | null>(null);
  private fragment$ = this.fragment$$.asObservable();

  constructor(private route: ActivatedRoute) {
    this.route.fragment.pipe(takeUntil(this.destroy$$)).subscribe(fragment => {
      this.fragment$$.next(fragment);
    });
  }

  public ngAfterViewInit(): void {
    this.fragment$.pipe(takeUntil(this.destroy$$)).subscribe(fragment => {
      if (!!fragment) {
        document.querySelector('#' + fragment).scrollIntoView();
      }
    });
  }

  public ngOnDestroy(): void {
    this.destroy$$.next();
    this.destroy$$.complete();
  }
}

Оскільки властивість фрагмента все ще не забезпечує прокручування якоря, цей спосіб вирішив для мене фокус:

<div [routerLink]="['somepath']" fragment="Test">
  <a href="#Test">Jump to 'Test' anchor </a>
</div>

Додавання до Kalyoyan в відповідь , ця підписка прив'язана до маршрутизатора , і буде жити до тих пір , поки сторінка повністю оновлена. Підписуючись на події маршрутизатора в компоненті, обов'язково скасуйте підписку в ngOnDestroy:

import { OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Subscription } from "rxjs/Rx";

class MyAppComponent implements OnDestroy {

  private subscription: Subscription;

  constructor(router: Router) {
    this.subscription = router.events.subscribe(s => {
      if (s instanceof NavigationEnd) {
        const tree = router.parseUrl(router.url);
        if (tree.fragment) {
          const element = document.querySelector("#" + tree.fragment);
          if (element) { element.scrollIntoView(element); }
        }
      }
    });
  }

  public ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Щойно я працював над цим власним веб-сайтом, тому я вважав, що варто розмістити своє рішення тут.

<a [routerLink]="baseUrlGoesHere" fragment="nameOfYourAnchorGoesHere">Link Text!</a>

<a name="nameOfYourAnchorGoesHere"></a>
<div>They're trying to anchor to me!</div>

А потім у свій компонент переконайтеся, що ви включили:

 import { ActivatedRoute } from '@angular/router';

 constructor(private route: ActivatedRoute) { 
     this.route.fragment.subscribe ( f => {
         const element = document.querySelector ( "#" + f )
         if ( element ) element.scrollIntoView ( element )
     });
 }

Прочитавши всі рішення, я шукав компонент, і знайшов той, який робить саме те, що було запропоновано в первинному питанні: прокрутка до прив’язних посилань. https://www.npmjs.com/package/ng2-scroll-to

Встановлюючи його, ви використовуєте синтаксис:

// app.awesome.component.ts
@Component({
   ...
   template: `...
        <a scrollTo href="#main-section">Scroll to main section</a>
        <button scrollTo scrollTargetSelector="#test-section">Scroll to test section</a>
        <button scrollTo scrollableElementSelector="#container" scrollYTarget="0">Go top</a>
        <!-- Further content here -->
        <div id="container">
            <section id="main-section">Bla bla bla</section>
            <section id="test-section">Bla bla bla</section>
        <div>
   ...`,
})
export class AwesomeComponent {
}

Це спрацювало дуже добре для мене.

Просте рішення, яке працює на сторінках без будь-яких параметрів запиту, - це сумісність браузера назад, вперед, маршрутизатор і глибоке посилання.

<a (click)="jumpToId('anchor1')">Go To Anchor 1</a>


ngOnInit() {

    // If your page is dynamic
    this.yourService.getWhatever()
        .then(
            data => {
            this.componentData = data;
            setTimeout(() => this.jumpToId( window.location.hash.substr(1) ), 100);
        }
    );

    // If your page is static
    // this.jumpToId( window.location.hash.substr(1) )
}

jumpToId( fragment ) {

    // Use the browser to navigate
    window.location.hash = fragment;

    // But also scroll when routing / deep-linking to dynamic page
    // or re-clicking same anchor
    if (fragment) {
        const element = document.querySelector('#' + fragment);
        if (element) element.scrollIntoView();
    }
}

Час очікування - просто дозволити завантаження на сторінку будь-яких динамічних даних, "захищених" * ngIf. Це також можна використовувати для прокручування до верхньої частини сторінки при зміні маршруту - просто введіть тег верхнього якоря за замовчуванням.

якщо не має значення, щоб ці ідентифікатори елементів додані до URL-адреси, спробуйте переглянути це посилання:

Кутовий 2 - прив’язні посилання на елемент на поточній сторінці

// html
// add (click) event on element
<a (click)="scroll({{any-element-id}})">Scroll</a>

// in ts file, do this
scroll(sectionId) {
let element = document.getElementById(sectionId);

  if(element) {
    element.scrollIntoView(); // scroll to a particular element
  }
 }

Ось ще одне вирішення щодо відповіді Хав'єра Фуентеса:

<a [routerLink]="['self-route', id]" fragment="some-element" (click)="gotoHashtag('some-element')">Jump to Element</a>

в сценарії:

import {ActivatedRoute} from "@angular/router";
import {Subscription} from "rxjs/Subscription";

export class Links {
    private scrollExecuted: boolean = false;

    constructor(private route: ActivatedRoute) {} 

    ngAfterViewChecked() {
            if (!this.scrollExecuted) {
              let routeFragmentSubscription: Subscription;
              routeFragmentSubscription = this.route.fragment.subscribe(fragment => {
                if (fragment) {
                  let element = document.getElementById(fragment);
                  if (element) {
                    element.scrollIntoView();
                    this.scrollExecuted = true;
                    // Free resources
                    setTimeout(
                      () => {
                        console.log('routeFragmentSubscription unsubscribe');
                        routeFragmentSubscription.unsubscribe();
                      }, 0);
                  }
                }
              });
            }
          }

        gotoHashtag(fragment: string) {
            const element = document.querySelector("#" + fragment);
            if (element) element.scrollIntoView(element);
        }
}

Це дозволяє користувачеві безпосередньо прокручувати до елемента, якщо користувач безпосередньо переходить на сторінку, що має URL-адресу хештегу.

Але в цьому випадку я підписав Фрагмент маршруту, ngAfterViewCheckedале ngAfterViewChecked()отримує виклик безперервно на кожного, ngDoCheckі це не дозволяє користувачеві прокручуватися назад доверху,routeFragmentSubscription.unsubscribe викликається після очікування в 0 мільйонів після прокручування перегляду до елемента.

Додатково gotoHashtagвизначено метод прокрутки до елемента, коли користувач спеціально клацає на тег прив’язки.

Оновлення:

Якщо в URL-адресі є рядки запитів, [routerLink]="['self-route', id]"у якорі звичайно зберегти запити. Я спробував виконати таке рішення:

<a (click)="gotoHashtag('some-element')">Jump to Element</a>

constructor( private route: ActivatedRoute,
              private _router:Router) {
}
...
...

gotoHashtag(fragment: string) {
    let url = '';
    let urlWithSegments = this._router.url.split('#');

    if(urlWithSegments.length){
      url = urlWithSegments[0];
    }

    window.location.hash = fragment;
    const element = document.querySelector("#" + fragment);
    if (element) element.scrollIntoView(element);
}

Ця робота для мене !! Цей ngДля того, щоб він динамічно закріплював тег, Вам потрібно дочекатися їх відображення

HTML:

<div #ngForComments *ngFor="let cm of Comments">
    <a id="Comment_{{cm.id}}" fragment="Comment_{{cm.id}}" (click)="jumpToId()">{{cm.namae}} Reply</a> Blah Blah
</div>

Мій файл ts:

private fragment: string;
@ViewChildren('ngForComments') AnchorComments: QueryList<any>;

ngOnInit() {
      this.route.fragment.subscribe(fragment => { this.fragment = fragment; 
   });
}
ngAfterViewInit() {
    this.AnchorComments.changes.subscribe(t => {
      this.ngForRendred();
    })
}

ngForRendred() {
    this.jumpToId()
}

jumpToId() { 
    let x = document.querySelector("#" + this.fragment);
    console.log(x)
    if (x){
        x.scrollIntoView();
    }
}

Не забудьте , що імпорт ViewChildren, і QueryListт.д .. і додати конструктор ActivatedRoute!!

На відміну від інших відповідей, я б також додав focus()разом із scrollIntoView(). Також я використовую, setTimeoutоскільки він змінюється в іншому випадку при зміні URL-адреси. Не впевнений, що було причиною цього, але здається, що це setTimeoutобходиться.

Походження:

<a [routerLink] fragment="some-id" (click)="scrollIntoView('some-id')">Jump</a>

Місце призначення:

<a id="some-id" tabindex="-1"></a>

Машинопис:

scrollIntoView(anchorHash) {
    setTimeout(() => {
        const anchor = document.getElementById(anchorHash);
        if (anchor) {
            anchor.focus();
            anchor.scrollIntoView();
        }
    });
}

У мене було те саме питання. Рішення: використання View Port Scroller https://angular.io/api/common/ViewportScroller#scrolltoanchor

- код app-routing.module.ts:

import { PageComponent } from './page/page.component';

const routes: Routes = [
   path: 'page', component: PageComponent },
   path: 'page/:id', component: PageComponent }
];

- Компонентний HTML

  <a (click) = "scrollTo('typeExec')">
    <mat-icon>lens</mat-icon>
  </a>

- код компонента:

    import { Component } from '@angular/core';
    import { ViewportScroller } from '@angular/common';


    export class ParametrageComponent {

      constructor(private viewScroller: ViewportScroller) {}

      scrollTo(tag : string)
      {
        this.viewScroller.scrollToAnchor(tag);
      }

    }

Я щойно тестував дуже корисний плагін, доступний в nmp - ngx-scroll-to , який для мене чудово працює. Однак він розроблений для Angular 4+, але, можливо, хтось знайде цю відповідь корисною.

Я спробував більшість цих рішень, але зіткнувся з проблемами, залишаючи і повертаючись з іншим фрагментом, він не буде працювати, тому я зробив щось трохи інше, що працює на 100%, і позбавляється від некрасивого хешу в URL.

tl; др ось кращий спосіб, ніж те, що я бачив досі.

import { Component, OnInit, AfterViewChecked, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

@Component({
    selector: 'app-hero',
    templateUrl: './hero.component.html',
    styleUrls: ['./hero.component.scss']
})
export class HeroComponent implements OnInit, AfterViewChecked, OnDestroy {
    private fragment: string;
    fragSub: Subscription;

    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        this.fragSub = this.route.fragment.subscribe( fragment => { this.fragment = fragment; })
    }

    ngAfterViewChecked(): void {
        try {
            document.querySelector('#' + this.fragment).scrollIntoView({behavior: 'smooth'});
            window.location.hash = "";
          } catch (e) { }
    }

    ngOnDestroy() {
        this.fragSub.unsubscribe();
    }
}