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