web-dev-qa-db-ja.com

Angular 7.x.xフラグメントまでスクロールする最も簡単な方法？

過去2日間に、私は断片を角度で見ることについてInternetzを通って掘られています。

フラグメントとして機能するID-Sの束を持つ静的Webページがあるとしましょう。そして、リンクでフラグメントをナビゲートする側面ナウババーを持っています。

私はルーターアンチョウロールを試しましたが、簡単に追加してください この モジュールには私には何もしていません。それはただのURLの断片をあなたに与えるがスクロールはない。

私はViewPortScrollerを試しました。これに関する主な問題は、初めて動作していません（たとえば、この静的ページにリダイレクトされている静的ページにリダイレクトされていますが、この静的な断片にリダイレクトされていますが、この同じページに行っていた場合は、プロセスを繰り返してください。 、訪問しているのと同じURLを持つサイドナビゲーションバーでリンクをクリックすると、次のようになります。_([foo]/[bar]#[fragment])_ナビゲーションが変更されていないため、機能しません。

ルータに使用される追加のオプション：

_const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  scrollPositionRestoration: 'enabled',
  onSameUrlNavigation: 'reload'
};
_

pS .: usehash：trueはこれまでに何を変えません。

ngoninit内のViewPortScroller：

_this.viewportScroller.setOffset([0, 64]);
this.viewportScroller.setHistoryScrollRestoration('auto');

this.router.events.pipe(filter(element => element instanceof Scroll)).subscribe((element: any) => {
  console.log(element)
  this.viewportScroller.scrollToAnchor(element.anchor);
});
_

フラグメントなしでスクロールする最も簡単な方法は何ですか。これを使う：

_ngOnInit() {
  this.route.fragment.subscribe((fragment: string) => { 
    if (fragment && document.getElementById(fragment) != null) {
      document.getElementById(fragment).scrollIntoView({ behavior: "smooth" });
    }
  });
}
_

b/Cは毎回取り組んでいますが、当社のプロジェクトでTSを使用するため、TSではありません。

助けてください

typescriptscrollangular7angular-routerangular-routerlink
10
Exitl0l

anchorScrolling: 'enabledを使用すると、*ngIfを使用しても機能していません GitHub Issue 1 と GitHub Issue 2 。 ⚠️

この問題のための現代的な1回の行サルト： https://stackoverflow.com/a/64185407/535611

0
Tilo