#angular
#angular
Вопрос:
В моем примере я хотел бы переместить ссылочную переменную шаблона #content в элемент paragraph, чтобы моя ссылка прокручивалась до соответствующего абзаца. Будет ли работать интерполяция, чтобы сделать ссылку уникальной?
Что-то вроде этого:
<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/app/app.component.html
Ответ №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 } for scroll, вы можете добавить идентификатор unig к каждому элементу и просто использовать id атрибутивные и привязочные ссылки
Комментарии:
1. вы можете использовать прямой поиск по индексу, чтобы получить элемент в списке запросов по одному индексу:
this.contentSections.find((x,i)=>i==index).nativeElement.scrollIntoView();