时间戳

首页 > 解决方案 > 我需要一个 for 循环中的锚点来滚动到另一个 for 循环中的段落。（角度 io）

angular - 我需要一个 for 循环中的锚点来滚动到另一个 for 循环中的段落。（角度 io）

问题描述

在我的示例中，我希望将#content 模板引用变量移动到段落元素中，以便我的链接将滚动到相应的段落。插值可以使参考独一无二吗？

像这样的东西：

<nav>
<a href="javascript:void(0)" *ngFor="let item of data; let i = index"  (click)="scroll(content)">Go To {{item.section}}</a>
</nav>

<div>
<p #content *ngFor="let item of data; let i = index" #content{{i}}>
  {{item.content}}  
<p>
</div>

https://stackblitz.com/edit/angular-ivy-gipbfk?file=src%2Fapp%2Fapp.component.html

标签： angular

解决方案

您可以使用ViewChildren装饰器从模板中获取段落并按索引获取所需的段落：

 @ViewChildren('paragrapth') paragraghs: QueryList<ElementRef<HTMLElement>>;

  data = [
    { section: 'Section One',
      content: 'Section One: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    },
    { section: 'Section Two',
      content: 'Section Two: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    },
    { section: 'Section Three',
      content: 'Section Three: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    }
  ];
  
  scroll(index: number) {
    const nodes = this.paragraghs.toArray();
    nodes[index].nativeElement.scrollIntoView();
  }

模板：

<nav>
  <a href="javascript:void(0)" *ngFor="let item of data; let i = index"  (click)="scroll(i)">Go To {{item.section}}</a>
</nav>

<div>
  <p #paragrapth *ngFor="let item of data; let i = index" >
    {{item.content}}  
  <p>
</div>

但是，如果您不需要{ behavior: smooth }用于滚动，您可以将 unig Id 添加到每个项目，只使用id属性和锚链接

推荐阅读