從一個組件鏈接到另一組件的Angular 2路由到網頁的特定部分

Question

我在頁腳中有一個鏈接，該鏈接指向條款頁面，但我希望該鏈接指向條款網頁的特定部分（術語第三段）。

這是footer.component.html的代碼

<a routerLink="terms">Terms & conditions</a> | 
<a routerLink="terms">Privacy policy</a> | 
<a routerLink="terms">Cancellation policy</a>

在terms.component.html是我希望單擊時在頁腳中打開隱私策略鏈接的地方。

<ol start="3">
    <li>INFORMATION SUBMITTED THROUGH OR TO OUR SERVICES</li>
</ol>

我們需要什么來使它們起作用？ 任何幫助表示贊賞。 謝謝。

Answer 1

這是答案，

和<a routerLink="terms">Terms & conditions</a> | <a routerLink="terms">Privacy policy</a> | <a routerLink="terms">Cancellation policy</a> <a routerLink="terms">Terms & conditions</a> | <a routerLink="terms">Privacy policy</a> | <a routerLink="terms">Cancellation policy</a>

而不只是使用。 <a routerLink="terms">Terms & conditions</a>

這樣使用

 <a [routerLink]="['/terms']" fragment="terms"> Terms & conditions </a>
 <a [routerLink]="['/terms']" fragment="cancel"> Cancellation policy </a>
 <a [routerLink]="['/terms']" fragment="privacy"> Privacy policy </a>

頁面應該像

<ol start="3" id="privacy" >
     <li>INFORMATION SUBMITTED THROUGH OR TO OUR SERVICES</li>
</ol>

 <ol start="3" id="terms" >
     <li>INFORMATION SUBMITTED THROUGH OR TO OUR SERVICES</li>
 </ol>

 <ol start="3" id="cancel" >
     <li>INFORMATION SUBMITTED THROUGH OR TO OUR SERVICES</li>
 </ol>

有關詳細說明和用法，請參考API。 -https://angular.io/api/router/RouterLink

Answer 2

為了添加到@Rahul VV的答案中，我使用下面的事件scrollIntoView編輯了組件，如下所示

footer.component.ts

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

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(); }
        }
      }
    });
   }