Angular 2 路由到网页的特定部分，从一个组件链接到另一个组件答案

【问题标题】：Angular 2 routing to specific part of a webpage from one component link to another componentAngular 2 路由到网页的特定部分，从一个组件链接到另一个组件
【发布时间】：2017-12-05 05:51:44
【问题描述】：

我在页脚中有一个指向条款页面的链接，但我希望该链接指向条款网页的特定部分（术语中的第 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 中是我希望在单击时打开页脚中的隐私政策链接的位置。

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

我们需要使用什么才能使这些工作？任何帮助表示赞赏。谢谢。

【问题讨论】：

stackoverflow.com/questions/36101756/…
@StefanLoKranDotti 你提供的链接是针对单个组件的，但我有两个组件要路由到
它与组件无关。路由器正在路由到组件并设置锚点。它应该像下面描述的那样工作。
我已经在组件中添加了方法然后它完美地工作了

标签： html angular angular-routing

【解决方案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

【讨论】：

@Johny_Bravo 请参考这个答案
我需要导入任何模块吗？
@Johny_Bravo 请为每个引用使用更多内容（条款、取消和隐私），然后只有浏览器会从该部分开始
是的，我有很多内容，但是当我点击特定链接时，它不会转到页面的特定部分
是的，它出现了，但它没有移动到特定部分

【解决方案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(); }
        }
      }
    });
   }

【讨论】：