Angular2如何导航到用id属性标识的页面的某些部分 [英] Angular2 How to navigate to certain section of the page identified with an id attribute

问题描述

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

How to navigate to certain section of the page identified with an id attribute?

例子:

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

I need to navigate to "structure" paragraph on my page

<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"...

It is my understanding that in Angular1.0 I simply could've navigate to the page section using something like: ui-sref="policies({'#':'structure'})" or href="#structure" or ui-sref="policies" href="#structure"...

如何在 Angular2 中做到这一点?我查看了 docs 中的片段示例:查询参数和片段部分我发现他们的例子对于这样一个可能很简单的任务来说非常令人困惑并且有点矫枉过正

How can I do it in Angular2? I looked at the Fragment example in the docs: Query Parameters and Fragments section and I am finding they example to be very confusing and a bit overkill for such a potentially simple task

推荐答案

Angular 2: 我更喜欢使用 scrollIntoView() 方法 scrollIntoView.它将在浏览器中提供平滑的滚动过渡效果.

HTML 代码

Angular 2: I would prefer to go with scrollIntoView() method scrollIntoView. It would provide smooth scrolling transition effect in the browser.

HTML Code

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

这篇关于Angular2如何导航到用id属性标识的页面的某些部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！