Angular 2 从一个组件路由到网页的特定部分 link 到另一个组件

Question

我在页脚中有一个 link 可以转到条款页面，但我希望 link 可以转到条款网页的特定部分（条款的第 3 段）。

这是 footer.component.html

的代码

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

在 terms.component.html 中是我希望在单击时打开页脚中的隐私政策 link 的地方。

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

Angular 2 从一个组件路由到网页的特定部分 link 到另一个组件

Angular 2 routing to specific part of a webpage from one component link to another component

html

angular-routing

angular