Question

我在棱角材质选项卡中具有选项卡，并且保存了selectedIndex，当我刷新时，我将获得与上次选择的选项卡相同的选项卡，而没有将选项卡设置为开始。

我从在线上获得了名为“ scrollToCenter”的指令，这意味着每次我按下某个选项卡时，其滚动到同一选项卡并置于所有选项卡的中心。这是指令：

 export class MatTabScrollToCenterDirective implements OnDestroy {
     subs = new Subscription();
     constructor(private element: ElementRef) {

       this.subs.add(
         fromEvent(this.element.nativeElement, 'click').subscribe((clickedContainer: MouseEvent) => {
           const scrollContainer = this.element.nativeElement.querySelector('.mat-tab-list');
           const currentScrolledContainerPosition: number = scrollContainer.scrollLeft;

           const newPositionScrollTo = this.calcScrollToCenterValue(clickedContainer, currentScrolledContainerPosition);

           scrollContainer.scroll({
             left: newPositionScrollTo,
             behavior: 'smooth',
           });
         })
       );
     }

     calcScrollToCenterValue(clickedContainer, currentScrolledContainerPosition): number {
       const scrolledButton: DOMRectI = (clickedContainer.target as HTMLElement).getBoundingClientRect();
       const leftXOffset = (window.innerWidth - scrolledButton.width) / 2;
       const currentVisibleViewportLeft = scrolledButton.left;
       const neededLeftOffset = currentVisibleViewportLeft - leftXOffset;
       const newValueToSCroll = currentScrolledContainerPosition + neededLeftOffset;

       return newValueToSCroll;
     }


     ngOnDestroy() {
       this.subs.unsubscribe();
     }
   }

我的问题是当我刷新它时，它不会滚动到活动选项卡，因为它仅发生在以下单击事件中：“ fromEvent（this.element.nativeElement，'click'）”。

我的问题是是否需要做一些工作才能使其正常工作。也许是点击触发器或更改指令以某种方式处理点击事件和刷新。

我感谢助手。

Angular 8材质选项卡-刷新时要滚动到同一选项卡处于活动状态

0 个答案: