Angular2如何导航到使用id属性标识的页面的某个部分

发布时间：2020-12-17 07:56:52 所属栏目：安全来源：网络整理

导读：如何导航到使用id属性标识的页面的某些部分？例：我需要导航到我页面上的“结构”段落 div id="info" h3Info/h3 pLorem ipsum dolor sit amet,consectetur adipiscing elit./p/div div id="structure" h3Structure/h3 pLorem ipsum dolor sit amet,consect

如何导航到使用id属性标识的页面的某些部分？

例：

我需要导航到我页面上的“结构”段落

<div id="info">
  <h3>Info</h3>
  <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
</div>    
<div id="structure">
  <h3>Structure</h3>
  <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
</div>

我有一个以下导航结构：

<li>
  <ul materialize="collapsible" class="collapsible" data-collapsible="accordion">
    <li><a routerLink="policies" class="collapsible-header">Policies</a>
      <div class="collapsible-body">
         <ul>
           <li><a >Info</a></li>
           <li><a >Structure</a></li>
           <li><a >Something Else</a></li>
         </ul>
      </div>
    </li>
   </ul>
 </li>

我的理解是,在Angular1.0中,我只需使用以下内容导航到页面部分：ui-sref =“policies({‘#’：’structure’})”或href =“#structure”或ui -sref =“policies”href =“#structure”……

我怎么能在Angular2中做到这一点？我查看了docs中的Fragment示例：查询参数和片段部分,我发现它们的例子非常令人困惑,对于这样一个潜在的简单任务来说有点矫枉过正

在HTML文件中执行单击后,我使用了上一个答案的组合：

<ul>
   <li><a (click)="internalRoute("routeexample1","info")">Info</a></li>
   <li><a (click)="internalRoute("routeexample2","structure")>Structure</a></li>
   <li><a (click)="internalRoute("routeexample3","something")>Something Else</a </li>
</ul>

在组件打字稿文件(组件文件)中,必须定义相应的导航,包括路由器和导航：

constructor(private router:Router) { }
internalRoute(page,dst){
    this.sectionScroll=dst;
    this.router.navigate([page],{fragment: dst});
}

有了这个,应用程序可以导航到相应的页面,但不能导航到特定的部分.要转到定义的(理想的)部分,需要进行滚动.为此,我们最初定义一个函数来滚动到特定的“id”(Scroll Function here)：

doScroll() {

    if (!this.sectionScroll) {
      return;
    }
    try {
      var elements = document.getElementById(this.sectionScroll);

      elements.scrollIntoView();
    }
    finally{
      this.sectionScroll = null;
    }
  }

最后,我们需要捕获导航事件并执行滚动(修改ngInit函数)(Event capturing page Init)：

ngOnInit() {
    this.router.events.subscribe((evt) => {
      if (!(evt instanceof NavigationEnd)) {
        return;
      }
      this.doScroll();
      this.sectionScroll= null;
    });
  }

这个对我有用.希望有所帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!