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

Posted 2023-02-22

【中文标题】Angular2如何导航到用id属性标识的页面的某些部分

【英文标题】：Angular2 How to navigate to certain section of the page identified with an id attribute

【发布时间】：2017-03-22 18:05:06

【问题描述】：

如何导航到用 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 中的片段示例：查询参数和片段部分，我发现它们的示例非常令人困惑，对于这样一个可能很简单的任务来说有点矫枉过正

【参考方案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' );
        );
    

【参考方案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>

在组件typescript文件（组件文件）中需要定义相应的导航包括Router和navigation：

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

它对我有用。希望有所帮助。

【讨论】：

第一个对我有用的解决方案。非常感谢您尝试和组合不同的解决方案。如果我可以投票更多，我会

【参考方案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');

【讨论】：

感谢您的回复！我都试过了，但都不起作用....如果有帮助，我正在使用 Angular 2.0.1..

AFAIR 有一个关于使用片段导航的未解决问题。

如何接收'routeexample1'里面的frament

这不是一个完整的答案