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 =“＃structure”......

我怎么能在Angular2中做到這一點？ 我查看了文檔中的Fragment示例：查詢參數和片段部分，我發現它們的例子非常令人困惑，對於這樣一個潛在的簡單任務來說有點矯枉過正

Answer 1

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

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 ）：

doScroll() {

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

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

最后，我們需要捕獲導航事件並執行滾動（修改ngInit函數）（ 事件捕獲頁面Init ）：

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

這個對我有用。 希望有所幫助。

Answer 3

您可以為html鏈接添加fragment屬性

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