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

【问题标题】：I need an anchor in one for loop to scroll to paragraph in another for loop. (Angular io)我需要一个 for 循环中的锚点来滚动到另一个 for 循环中的段落。（角度 io）
【发布时间】：2020-09-21 18:33:04
【问题描述】：

在我的示例中，我希望将#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

【解决方案1】：

您可以使用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 属性和anchor links

【讨论】：

你可以直接用find和index来获取QueryList中一个index处的元素：this.contentSections.find((x,i)=>i==index).nativeElement.scrollIntoView();