角2：ページを読み込むときにページの部分的な要素にジャンプ

Question

あるページから別のページにナビゲートし、宛先ページの中央にある1つのコントロールに直接ジャンプしたい。通常、ハッシュタグ "＃"を使用して、コントロールの名前またはIDを使用することができます。

しかし、この方法は角度2でうまくいきます。 Angular2 Routing with Hashtag to page anchorのような方法を試しました。その方法では、URLは "#myId"で終わりますが、ページは実際にジャンプしません。

これを達成する他の方法はありますか？

Answer 1

角度ドキュメントプロジェクトには、AutoScrollServiceサービスがあります。あなたはそれを使用しようとすることができます。 auto-scroll.service.ts

/** 
* A service that supports automatically scrolling elements into view 
*/ 
@Injectable() 
export class AutoScrollService { 
    constructor(
     @Inject(DOCUMENT) private document: any, 
     private location: PlatformLocation) { } 

    /** 
    * Scroll to the element with id extracted from the current location hash fragment 
    * Scroll to top if no hash 
    * Don't scroll if hash not found 
    */ 
    scroll() { 
    const hash = this.getCurrentHash(); 
    const element: HTMLElement = hash 
     ? this.document.getElementById(hash) 
     : this.document.getElementById('top-of-page') || this.document.body; 
    if (element) { 
     element.scrollIntoView(); 
     if (window && window.scrollBy) { window.scrollBy(0, -80); } 
    } 
    } 

    /** 
    * We can get the hash fragment from the `PlatformLocation` but 
    * it needs the `#` char removing from the front. 
    */ 
    private getCurrentHash() { 
    return this.location.hash.replace(/^#/, ''); 
    } 
}