同じページの* ngFor内で複数のコンポーネントを実行しています。ページの上部に、クリックするとコンポーネントにスクロールできるいくつかのボタンリンクが必要です。
これが私が従おうとしているコードです。
htmlファイル：
<button (click)="scroll(target)"></button>
<div #target>Your target</div>
およびtsファイル内：
scroll(el: HTMLElement) {
el.scrollIntoView();
}
しかし、各コンポーネントセレクターをどのように参照できるかわかりません
上記のコードをまだ実装していない私のコードの一部を次に示します。
//There will be many buttons to link to each of the component.
<button type="button" (click)="scroll()">Click this button to navigate</button>
<div *ngFor="let appdata of appData">
<app-details [value]="appdata"></app-details>
</div>
'appdata'は、appID（コンポーネントを一意に識別できる）、タイトル、説明などの属性を含むjson変数です。
コンポーネントを参照する方法をアドバイスし、実装方法を提案してください。ありがとうございました！！
要素までスクロールするには、javascriptが提供するwindow.scrollTo（xpos、ypos）関数を使用できます。
あなたはこのようにすることができます
まず、ウィンドウオブジェクトを参照する変数を宣言します
win:Window=window;
次に、スクロール機能を定義します
scroll(component){
this.win.scrollTo(0,component.offsetTop);
}
ここで、コンポーネントパラメータは特定の要素を指します。そしてcomponent.offsetTopは、その要素のY位置を与えます。
そしてHTMLでは、
<span *ngFor="let target of win.document.getElementsByTagName('app-details');let i=index" >
<button (click)="scroll(target)" > Go TO {{i}}</button></span>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加