Mobile versionZum Layout importiere ich Bootstrap 5 -Dienstprogramme. Es reicht aus, dass die Schaltflächen in der ersten Zeile keinen Rand mit dem My App -Header haben (für den ich keinen Code hinzufügt).
Wenn ich Element kommentiere. Im Konstruktor. < /p>
Beachten Sie die CSS in der Shell -Komponente. Es sollte das ausgewählte Element in der Ansicht und mindestens ein weiteres Element über dem ausgewählten Element aufbewahren, wenn der Index nicht Null ist, sodass der Benutzer klicken kann, um nach oben oder unten zu gehen.
Code: Select all
import { Component, computed, effect, ElementRef, inject, viewChildren } from '@angular/core';
import { MyStore } from '../../../stores/my-store.store';
@Component({
selector: 'app-my-list-wrapper',
standalone: true,
templateUrl: './my-list-wrapper.component.html'
})
export class MyListWrapperComponent {
listItems = viewChildren('orderedListItem');
myStore = inject(MyStore);
readonly items = computed(() =>
this.myStore
.getItems()
.map((result) => result.model)
);
selected= computed(
() => this.myStore.selected()?.index - 1
);
constructor() {
effect(() => {
const index = this.selected();
if (index >= 0 && !!this.listItems()) {
setTimeout(() => this.scrollToTop(index), 0); // Ensure DOM is updated before scrolling
}
});
}
setCurrent(index: number) {
if (step < this.myStore.items().length && step >= 0) {
this.myStore.setSelected(
this.myStore.items()[index]
);
this.scrollToTop(index);
}
}
scrollToTop(index: number) {
if (index > 0) index--;
const element = this.listItems().at(index)?.nativeElement;
if (element) {
element.scrollIntoView(true);
} else {
console.error('List item not found at index:', index);
}
}
}
< /code>
List -Wrapper -Vorlage: < /p>
@for (item of items(); track item; let index = $index) {
{{ index + 1 }}
{{ item }}
}
< /code>
Shell -Klasse: < /p>
import { Component, OnInit, computed, inject } from '@angular/core';
import { MyStore } from '../../stores/my-store.store';
import { ActivatedRoute, Router } from '@angular/router';
import { MatDividerModule } from '@angular/material/divider';
import { MyOtherStore } from '../../stores/my-other-store.store';
import { MyListWrapperComponent } from './list-wrapper/list-wrapper.component';
import { MyItemDetailsComponent } from './item-details/item-details.component';
@Component({
selector: 'app-shell',
standalone: true,
imports: [
MatDividerModule,
MyListWrapperComponent,
MyItemDetailsComponent
],
templateUrl: './shell.component.html',
styleUrl: './shell.component.scss',
})
export class ShellComponent implements OnInit {
readonly route = inject(ActivatedRoute);
readonly router = inject(Router);
myStore = inject(MyStore);
myOtherStore = inject(MyOtherStore);
readonly selectedDetails = computed(() =>
this.myStore
.items()
.flatMap((result) => result.details)
);
selected = this.myOtherStore.selected;
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id') ?? 'error';
this.myStore.fetchItems(id);
}
}
< /code>
Shell -Vorlage: < /p>
{{ title }}
@if (selected().title != '') {
{{ selected().title }}
}
@else {
No Selected
}
@if (selected().title != '') {
}
@else {
My List Wrapper Goes Here
}
< /code>
Shell CSS: < /p>
.hl-container {
height: calc(
90vh - 50px
); // 10vh is the height of the shell header, 50px is the height of the application header
overflow-y: scroll;
}
.hl-container::-webkit-scrollbar {
display: none;
}
< /code>
Was ich bereits ausprobiert habe: < /p>
Ich habe das ausgewählte Element aus einem Div mit #ScrollContainer für diese erhalten. < /p>
scrollToTop(index: number) {
const itemElement = this.scrollContainer().nativeElement.querySelector(`#ordered-item-${index}`);
if (itemElement) {
const container = this.scrollContainer().nativeElement;
const itemOffsetTop = itemElement.offsetTop;
container.scrollTop = itemOffsetTop;
} else {
console.error('List item not found at index:', index);
}
}
< /code>
scrollToTop(index: number) {
const itemElement = this.scrollContainer().nativeElement.querySelector(`#ordered-item-${index}`);
if (itemElement) {
const container = this.scrollContainer().nativeElement;
const itemOffsetTop = itemElement.offsetTop;
container.scrollTop = itemOffsetTop - container.offsetTop;
} else {
console.error('List item not found at index:', index);
}
}
< /code>
scrollToTop(index: number) {
if (index > 0) index--;
const itemElement = this.scrollContainer().nativeElement.querySelector(`#ordered-item-${index}`);
if (itemElement) {
const container = this.scrollContainer().nativeElement;
const itemRect = itemElement.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
const offset = itemRect.top - containerRect.top + container.scrollTop;
container.scrollTo({ top: offset, behavior: 'smooth' });
} else {
console.error('List item not found at index:', index);
}
}
< /code>
scrollToTop(index: number) {
if (index > 0) index--;
const itemElement = this.scrollContainer().nativeElement.querySelector(`#ordered-item-${index}`);
if (itemElement) {
const container = this.scrollContainer().nativeElement;
const itemOffsetTop = itemElement.offsetTop;
container.scrollTo({ top: itemOffsetTop, behavior: 'smooth' });
} else {
console.error('List item not found at index:', index);
}
}
< /code>
Hoping someone here can at least explain what is happening with element.scrollIntoView(true)