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

推荐答案

角度2:我更喜欢使用scrollIntoView()方法

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屋！