it-swarm.com.ru

Маршрутизация Angular2 Hashtag на Anchor не перемещает страницу

Поэтому я использовал следующий пост, чтобы выяснить, как добавить фрагмент в URL.

Angular2 Маршрутизация с хэштегом к привязке страницы

И фрагмент добавляется нормально, однако страница не перемещается в результирующий якорь. Я попытался использовать оба атрибута name и id в месте назначения div, но ни один из них не работает.

Я использую Angular Версия 2.0.0-rc.3 и маршрутизатор версии 3.0.0-alpha.6.

Спасибо!

<a [routerLink]="[]" fragment="destination">Go TO DIV</a>

<div id='destination'>
    <h2>Destination</h2>
</div>

Между двумя элементами достаточно места, чтобы определить, действительно ли страница перемещается.

И, как уже было сказано, URL правильно добавляет #destination к себе.

11
jipson

Обходным путем может быть написание функции в вашем компоненте, которая устанавливает location.hash для идентификатора div, к которому вы хотите перейти.

<a (click)="goTo('destination')">Go TO DIV</a>

<div id='destination'>
    <h2>Destination</h2>
</div>

Тогда в вашем компоненте:

goTo(location: string): void {
    window.location.hash = location;
}
14
JohnMAC

Это сработало для меня:

Сначала подготовьте 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 } );
  }

}
2
JavierFuentes

Увидев все решения здесь, я решил пойти с маленькой и простой директивой. Вот чем я закончил:

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({ selector: '[appAnchorTo]' })
export class AnchorToDirective {
  @Input() target: string;

  constructor(el: ElementRef) { el.nativeElement.style.cursor = 'pointer'; }

  @HostListener('click', ['$event'])
  onClick() { document.querySelector(this.target).scrollIntoView(); }
}

Идея заключалась в том, чтобы создать что-то гибкое, что можно было бы прикрепить к любому элементу на странице.

Использование:

<a appAnchorTo target="#my-link">My Insights</a>
<div appAnchorTo target="#my-other-link">My Customers</div>

И не забудьте объявить директиву на одном из ваших модулей:

@NgModule({
    ...,
    declarations: [
        ...,
        AnchorToDirective,
    ]
})
2
rafaelbiten

Этот обходной путь должен помочь

<div [routerLink]="[]" fragment="destination">
  <a href="#destination">Go TO DIV</a>
</div>
2
Martin Cremer

Вот очень простое решение, которое сработало для меня:

В компонент добавьте этот метод:

navigateTo(location: string): void {
// location will be a valid CSS ID selector; i.e. it should be preceded with '#'
window.location.hash = location;
setTimeout(() => {
    document.querySelector(location).parentElement.scrollIntoView();
  });
}

И в представлении, тег <a> будет выглядеть так:

<a (click)="navigateTo('#destination')">Destination</a>
2
Soma Mbadiwe

Вы также можете использовать этот плагин https://www.npmjs.com/package/ng2-page-scroll Он выполняет анимированную прокрутку к данной привязке.

1
Well-Made

Я нашел очень полезный плагин, доступный в nmp - ngx-scroll-to , который отлично работает для меня. Тем не менее, он разработан для Angular 4+, но, возможно, кто-то найдет этот ответ полезным.

0
mpro