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

Question

如何导航到用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 =“＃结构”...

我该如何在Angular2中做到这一点？我看着片段例如在docs：查询参数和片段部分，我发现他们例子是非常混乱，这种潜在的简单的任务

Answer 1

有点大材小用，您可以添加fragment属性为你的HTML链接

<ul> 
    <li><a [routerLink]="['routeexample1']" fragment="info">Info</a></li> 
    <li><a [routerLink]="['routeexample2']" fragment="structure">Structure</a></li> 
    <li><a [routerLink]="['routeexample3']" fragment="something">Something Else</a></li> 
</ul> 

要以编程方式导航，可以将这个

this.router.navigate(['routeexample1' ], {fragment: 'structure'}); 

Answer 2

一旦点击在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; 
    }); 
    } 

它适用于我。希望有所帮助。

Answer 3

角2：我宁愿用scrollIntoView（）方法scrollIntoView去。它在浏览器中提供了平滑的滚动事务效果。

在HTML

<div #info id="info"> 
     <h3>Info</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
    <div #structure 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 (click)="infoStruc()"><a >Info</a></li> 
      <li (click)="moveToStructure()"><a >Structure</a></li> 
      <li><a >Something Else</a></li> 
     </ul> 
     </div> 
    </li> 
    </ul> 
</li> 

和在组件。

@Component({ 
    selector: 'my-app', 
    template: `template.html  ` 
}) 
export class AppComponent { 
    @ViewChild('structure') public structure:ElementRef; 
    @ViewChild('info') public info:ElementRef; 

    public moveToStructure():void { 
      this.structure.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' }); 
    } 
    public infoStruc():void { 
     setImmediate(() => { 
      this.info.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' }); 
     }); 
    } 
}