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

问题描述

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

示例:

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

<h3>信息</h3><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.</p>
<div id="结构"><h3>结构</h3><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.</p>

我有以下导航结构:

<ul materialize="collapsible" class="collapsible" data-collapsible="accordion"><li><a routerLink="policies" class="collapsible-header">Policies</a><div class="collapsible-body"><ul><li><a>信息</a></li><li><a>结构</a></li><li><a>别的东西</a></li>

据我所知，在 Angular1.0 中，我可以简单地使用以下内容导航到页面部分:ui-sref="policies({'#':'structure'})" 或 href="#structure" 或 ui-sref="policies" href="#structure"...

我如何在 Angular2 中做到这一点?我查看了 docs: Query Parameters and Fragments 部分中的 Fragment 示例我发现他们的例子非常令人困惑，对于这样一个潜在的简单任务来说有点矫枉过正

解决方案

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

HTML 代码

 
<h3>信息</h3><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.</p>
<div #structure id="结构"><h3>结构</h3><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.</p>

<li><ul materialize=可折叠"类=可折叠"数据可折叠=手风琴"><li><a routerLink=policies";class=collapsible-header">策略</a><div class="collapsible-body"><ul><li (click)=infoStruc()"><a >Info</a></li><li (click)=moveToStructure()"><a >Structure</a></li><li><a>别的东西</a></li>

并在组件中.

 @Component({选择器:'我的应用'，模板:`template.html`})导出类 AppComponent {@ViewChild('structure') 公共结构:ElementRef;@ViewChild('info') 公共信息:ElementRef;公共 moveToStructure():void {this.structure.nativeElement.scrollIntoView({行为:'平滑'，块:'结束'，内联:'开始'});}公共信息结构():无效{setImmediate(() => {this.info.nativeElement.scrollIntoView({行为:'平滑'，块:'结束'，内联:'开始'});});}}

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

Example:

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>

And I have a following navigation structure:

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

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

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: 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>

and in the Component.

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