web-dev-qa-db-ja.com

Angular 6でHTMLアンカーリンク#idを使用する

URLから＃を削除するhash-location-strategyを無効/削除したAngular 6プロジェクトで作業しています。

この変更により、リンクは次のようになります。

<li routerLinkActive="active">
   <a [routerLink]="['/settings']">Contact Settings</a>
   <ul class="child-link-sub">
      <li>
         <a href="#contactTypes">Contact Types</a>
      </li>
   </ul>
</li>

動作しなくなったため、現在のコンポーネントのURLをスキップし、localhostの後に#contactTypesを追加します。

私はこれを見つけました link これを使用して問題を解決する必要があります

<a [routerLink]="['/settings/']" fragment="contactTypes" >Contact Types</a>

uRLの最後に#contactTypesを追加しますが、ブラウザの上部までスクロールしません。

ソース： https://github.com/angular/angular/issues/6595

htmlangularroutinganchorhash-location-strategy
9
eirenaios

Angular 6.1には、ルーターモジュールの anchorScrolling にある ExtraOptions というオプションが付属しています。 anchorScrolling definition のように：

URLにフラグメントがある場合にルーターが要素までスクロールするかどうかを構成します。

'disabled'-何もしません（デフォルト）。

'enabled'-要素までスクロールします。このオプションは将来デフォルトになります。

アンカースクロールは「popstate」では発生しません。代わりに、保存した位置を復元するか、上にスクロールします。

次のように使用できます。

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  // ...any other options you'd like to use
};

// then just import your RouterModule with these options

RouterModule.forRoot(MY_APP_ROUTES, routerOptions)
14
Machado

私は同様の解決策を探していて、 ngx-scroll-to パッケージを使用しようとしましたが、angularの最新バージョンでは動作しないことがわかりました。 scrollIntoViewを使用できることがわかりました

HTMLコード：

<button (click)="scrollToElement(target)"></button>
<div #target>Your target</div>

Tsコード：

  scrollToElement($element): void {
    console.log($element);
    $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }
14
Joel Joseph

ハッシュスクロール戦略を使用して、ハッシュスクロールを有効にする必要があります。

routerModule.forRoot（[]、{useHash：true}}のようなオブジェクトとして2番目の引数を与える必要があります。

3
Bhavesh Suwalka

ngxページスクロール を使用

 <a pageScroll href="#awesomePart">Take me to the awesomeness</a>
 <h2 id="awesomePart">This is where the awesome happens</h2>
2
user7185558

アクセシビリティの理由から、スクリーンリーダーを使用してユーザーにコンテンツへの直接アクセスを提供するために、ドキュメントの冒頭にリンクを張る必要がありました。

実際にapp-rootまたはコンポーネントの外にある（コンポーネント内で解決策が動作する）ので、フォーカスを維持する（できればhref属性を保持する）ためにリンクが必要だったので、単純な古き良きファッションhtmlとjavascriptを使用しました：

<a href="./#content"
     onclick="event.preventDefault(); location.hash='content';"
     class="content-shortcut"
     title="Access page content directly"
     i18n-title
     aria-label="Access page content directly"
     i18n-label>Access page content directly</a>
  <style>
    .content-shortcut {
      position: absolute;
      opacity: 0;
      height: 0px;
      font-size: 1px;
    }

    .content-shortcut:focus,
    .content-shortcut:active {
      position: relative;
      opacity: 1;
      height: auto;
      font-size: 1em;
      display: block;
      color: black;
      background: white;
    }

  </style>
2
svassr