Question

我正在使用角度材料垫标签，我在点击该标签时动态加载每个标签的数据。每个选项卡都有大量数据。所以我修复了mat选项卡标题并使内容滚动，但现在我必须保留滚动记录，因为我创建了一个指令。

基本上我想要实现的是，如果我在一个滚动位置的1个选项卡中，然后当我点击下一个选项卡然后再次转到上一个选项卡时，我想要处于相同的滚动位置离开而不是再次在顶部。

目前我在每个标签中都有滚动位置，但是当我点击上一个标签时，它再次重置为零。所以我认为我需要做的就是在点击另一个标签之前，我需要将滚动位置存储在某个变量中但不太确定如何执行此操作，因为我在mat选项卡中没有这样的事件。 stacklitz demo link

这是我的指示

import { Directive, HostListener,
  Component,
  Output,
  EventEmitter,
  Input,
  SimpleChange } from '@angular/core';

@Directive({
  selector: '[appTrackScroll]',

})
export class TrackScrollDirective {


@Output() pageYPositionChange: EventEmitter<any> = new EventEmitter();
  @HostListener('window:scroll', ['$event'])
  track(event) {
    console.log('Scroll Event', event);
this.pageYPositionChange.emit(document.documentElement.scrollTop);

  }
   constructor() {}
}

这是我的HTML

<div flex class="tabs-wrapper" appTrackScroll(pageYPositionChange)="onPageYChange($event)">
  <mat-tab-group class="demo-tab-group" (selectedIndexChange)="loadDynamicContent($event)">
    <mat-tab matTooltip="Tooltip!" label="Personal info" class="full-size">
      <table id="customers" *ngIf="customerData">
        <caption class="caption">
          <h4>Customer Information</h4>
        </caption>
        <tr *ngFor="let item of customerData">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>
      <table id="customers" *ngIf="aadhaarAddress">
        <caption>
          <h4>Aadhaar Address</h4>
        </caption>
        <tr *ngFor="let item of aadhaarAddress">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>
      <table id="customers" *ngIf="presentAddress">
        <caption>
          <h4>Present Address</h4>
        </caption>
        <tr *ngFor="let item of presentAddress">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>
      <table id="customers" *ngIf="financialInfo">
        <caption>
          <h4>Financial Health Information</h4>
        </caption>
        <tr *ngFor="let item of financialInfo">
          <td class="key">
            {{item.key}}
          </td>
          <td class="value">{{item.value}}</td>
        </tr>
      </table>
      <br>
    </mat-tab>
    <mat-tab label="Bureau Analysis">
      <table id="customers" *ngIf="bureauAnalysisData">
        <caption class="caption">
          <h4>Bureau Analysis Data</h4>
        </caption>
        <tr *ngFor="let item of bureauAnalysisData">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>

<table id="customers" *ngIf="bureauScoreReasons">
  <caption>
    <h4>Bureau Score Reasons</h4>
  </caption>
<tr *ngFor="let item of bureauScoreReasons">

    <td class="key" width="50%">

      {{item.key}}
    </td>
    <td class="value" width="50%">{{item.value}}</td>

  </tr>
</table>

      <table id="customers" *ngIf="bureauEMI">
        <caption>
          <h4>Total EMI in CIBIL</h4>
        </caption>
        <tr *ngFor="let item of bureauEMI">
<td class="key" width="50%">

            {{item.key}}
          </td>
<td class="value" width="50%">{{item.value}}</td>

        </tr>
      </table>
      <br>
    </mat-tab>
    <mat-tab label="Bureau Enquiry">
      <table id="customers" *ngIf="enquiry1">
        <caption class="caption">
          <h4>Enquiries in last 30 days</h4>
        </caption>
        <tr>
          <th class="hide"></th>
          <th class="value hide">Number of enquiries</th>
          <th class="value hide">Average amount</th>
        </tr>
        <tr *ngFor="let item of enquiry1">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="25%">{{item.value}} </td>
          <td class="value" width="25%">{{item.value2}}</td>
        </tr>
      </table>
      <br>
      <table id="customers" *ngIf="enquiry2">
        <caption>
          <h4>Enquiries in last 31-90 days</h4>
        </caption>
        <tr>
          <th class="hide"></th>
          <th class="value hide">Number of enquiries</th>
          <th class="value hide">Average amount</th>
        </tr>
        <tr *ngFor="let item of enquiry2">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="25%">{{item.value}}</td>
          <td class="value" width="25%">{{item.value2}}</td>
        </tr>
      </table>
      <br>
    </mat-tab>
    <mat-tab label="SMS Insights">
      <table id="customers" *ngIf="smsData">
        <caption class="caption">
          <h4>SMS Data Analysis</h4>
        </caption>
        <tr *ngFor="let item of smsData">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>
      <table id="customers" *ngIf="salary">
        <!-- <div *ngIf="salary.lenght>0"> -->
<caption *ngIf="salary.lenght>0">

            <h4>Salary</h4>
          </caption>
<tr *ngIf="salary.lenght>0">

        <th width="1%">S.No </th>
        <th width="20%">SMS Date </th>
        <th width="13%">Sender Name </th>
        <th width="66">Original Message </th>
          </tr>
          <tr *ngFor="let item of salary;let i=index">
            <td>
              {{i+1}}
            </td>
            <td>{{item.smsDate}}</td>
            <td>{{item.senderName}}</td>
            <td>{{item.originalMessage}}</td>
          </tr>
        <!-- </div> -->
      </table>
      <table id="customers" *ngIf="balance">
        <!-- <div *ngIf="balance.length>0"> -->
<caption *ngIf="balance.length>0">

            <h4>Insufficient, bounce, return, overdue</h4>
          </caption>
<tr *ngIf="balance.length>0">

        <th width="1%">S.No </th>
        <th width="20%">SMS Date </th>
        <th width="13%">Sender Name </th>
        <th width="66">Original Message </th>
          </tr>
          <tr *ngFor="let item of balance;let i=index">
            <td>
              {{i+1}}
            </td>
            <td>{{item.smsDate}}</td>
            <td>{{item.senderName}}</td>
            <td>{{item.originalMessage}}</td>
          </tr>
        <!-- </div> -->
      </table>
      <table id="customers" *ngIf="nach">
        <!-- <div *ngIf="nach.length>0"> -->
<caption *ngIf="nach.length>0">

            <h4>EMI, ECS & NACH</h4>
          </caption>
<tr *ngIf="nach.length>0">

          <th width="1%">S.No </th>
          <th width="20%">SMS Date </th>
          <th width="13%">Sender Name </th>
          <th width="66">Original Message </th>
          </tr>
          <tr *ngFor="let item of nach;let i=index">
            <td>
              {{i+1}}
            </td>
            <td>{{item.smsDate}}</td>
            <td>{{item.senderName}}</td>
            <td>{{item.originalMessage}}</td>
          </tr>
        <!-- </div> -->
      </table>
      <table id="customers" *ngIf="bureau">
        <!-- <div *ngIf="bureau.length>0"> -->
<caption *ngIf="bureau.length>0">

            <h4>Bureau</h4>
          </caption>
<tr *ngIf="bureau.length>0">

          <th width="1%">S.No </th>
          <th width="20%">SMS Date </th>
          <th width="13%">Sender Name </th>
          <th width="66">Original Message </th>
          </tr>
          <tr *ngFor="let item of bureau;let i=index">
            <td>
              {{i+1}}
            </td>
            <td>{{item.smsDate}}</td>
            <td>{{item.senderName}}</td>
            <td>{{item.originalMessage}}</td>
          </tr>
        <!-- </div> -->
      </table>
      <table id="customers" *ngIf="companySalary">
        <!-- <div *ngIf="companySalary.length>0"> -->
<caption *ngIf="companySalary.length>0">

            <h4>Company Salary</h4>
          </caption>
<tr *ngIf="companySalary.length>0">

        <th width="1%">S.No </th>
        <th width="20%">SMS Date </th>
        <th width="13%">Sender Name </th>
        <th width="66">Original Message </th>
          </tr>
          <tr *ngFor="let item of companySalary;let i=index">
            <td>
              {{i+1}}
            </td>
            <td>{{item.smsDate}}</td>
            <td>{{item.senderName}}</td>
            <td>{{item.originalMessage}}</td>
          </tr>
        <!-- </div> -->
      </table>
      <table id="customers" *ngIf="loan">
        <!-- <div *ngIf="loan.length>0"> -->
<caption *ngIf="loan.length>0">

            <h4>Loan</h4>
          </caption>
<tr *ngIf="loan.length>0">

        <th width="1%">S.No </th>
        <th width="20%">SMS Date </th>
        <th width="13%">Sender Name </th>
        <th width="66">Original Message </th>
          </tr>
          <tr *ngFor="let item of loan;let i=index">
            <td>{{i+1}}</td>
            <td>{{item.smsDate}}</td>
            <td>{{item.senderName}}</td>
            <td>{{item.originalMessage}}</td>
          </tr>
        <!-- </div> -->
      </table>
      <table id="customers" *ngIf="score">
        <!-- <div *ngIf="score.length>0"> -->
<caption *ngIf="score.length>0">

            <h4>Score</h4>
          </caption>
<tr *ngIf="score.length>0">

        <th width="1%">S.No </th>
        <th width="20%">SMS Date </th>
        <th width="13%">Sender Name </th>
        <th width="66">Original Message </th>
          </tr>
          <tr *ngFor="let item of score;let i=index">
            <td>{{i+1}}</td>
            <td>{{item.smsDate}}</td>
            <td>{{item.senderName}}</td>
            <td>{{item.originalMessage}}</td>
          </tr>
        <!-- </div> -->
      </table>
      <table id="customers" *ngIf="allSMSData">
        <!-- <div *ngIf="allSMSData.length>0"> -->
          <caption *ngIf="allSMSData.length>0">
            <h4>All SMS</h4>
          </caption>
        <tr *ngIf="allSMSData.length>0">
            <th width="1%">S.No </th>
            <th width="20%">SMS Date </th>
            <th width="13%">Sender Name </th>
            <th width="66">Original Message </th>
          </tr>
          <tr *ngFor="let item of allSMSData;let i=index">
            <td >{{i+1}}</td>
            <td >{{item.smsDate}}</td>
            <td>{{item.senderName}}</td>
            <td >{{item.originalMessage}}</td>
          </tr>
        <!-- </div> -->
      </table>
      <br>
    </mat-tab>
    <mat-tab label="Device Data">
      <table id="customers" *ngIf="deviceData">
        <caption class="caption">
          <h4>Device Data</h4>
        </caption>
        <tr *ngFor="let item of deviceData">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>
      <table id="customers" *ngIf="wifiConnectionInfo">
        <caption *ngIf="wifiConnectionInfo.length>0">
          <h4>Wi-Fi Connections Information</h4>
        </caption>
        <tr *ngIf="wifiConnectionInfo.length>0">
          <th style="padding-left: 75px ">Wi-Fi Name</th>
          <th style="padding-left: 75px; ">No. of times connected in the last 7 days</th>
        </tr>
        <tr *ngFor="let item of wifiConnectionInfo">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>
      <br>
      <table id="customers" *ngIf="accountInfo">
        <caption *ngIf="accountInfo.length>0">
          <h4>Account Information</h4>
        </caption>
        <tr>
          <th style="padding-left: 75px">Email</th>
          <th style="padding-left: 75px;">Vendor</th>
        </tr>
        <tr *ngFor="let item of accountInfo">
          <td class="key" width="50%">
            {{item.email}}
          </td>
          <td class="value" width="50%">{{item.vendor}}</td>
        </tr>
      </table>
      <br>
    </mat-tab>
    <mat-tab label="Bureau Json">
      <mat-card class="caption">
        <app-ngx-json-viewer [json]="bureauJSON" class="json"></app-ngx-json-viewer>
      </mat-card>
    </mat-tab>
  </mat-tab-group>
</div>

我的ts

export class UserComponent implements OnInit {
  color = "primary";
   pageY;
  mode = "indeterminate";
  value = 50;
  bufferValue = 75;
  loading: boolean;
  mobileNo: string;
  authToken: string;
  customerData;
  aadhaarAddress;
  presentAddress;
  financialInfo;
  wifiConnectionInfo;
  deviceData;
  accountInfo;
  bureauAnalysisData;
  bureauScoreReasons;
  bureauEMI;
  bureauJSON;
  enquiry1;
  enquiry2;
  smsData;
  salary;
  balance;
  nach;
  bureau;
  companySalary;
  loan;
  score;
  allSMSData;
  array = [];
  dataNotAvailable = false;
  constructor(
    private storageService: StorageService,
    private userService: UserService,
    private toastr: ToastrService,
    private router: Router,
    private route: ActivatedRoute
  ) {
    console.log(this.route);
    console.log(this.route.queryParams);
    //    if (this.route.queryParams) {
    this.route.queryParams.subscribe(params => {
      this.mobileNo = params["mobile"];
      this.authToken = params["auth-token"];
    });
    //    }

    console.log(this.mobileNo, this.authToken);
    this.getUser();
  }


 onPageYChange(pageY: number) {
    this.pageY = pageY;
    console.log(pageY);
    console.log("PageY Pos ", pageY);
  }

  ngOnInit() {}

  getUser() {
    console.log("66666");
    console.log(document.body.scrollHeight);
    this.loading = true;
    console.log(this.mobileNo, this.authToken);
    this.userService.getUser(this.mobileNo, this.authToken).subscribe(
      data => {
        console.log(data);
        this.loading = false;
        if (data === null) {
          console.log("here");
          this.dataNotAvailable = true;
          // this.toastr.info(
          //   "No data available for " + this.mobileNo, "Unavailable!",
          //    { positionClass: "toast-center-center" }
          // );
        } else {
          this.customerData = data["customerData"];
          console.log(this.customerData);
          this.aadhaarAddress = data["aadhaarAddress"];
          this.presentAddress = data["presentAddress"];
          this.financialInfo = data["financialInfo"];
          console.log(this.presentAddress, this.financialInfo);
        }
      },
      error => {
        console.log(error);
        //   this.toastr.error(error.message, {positionClass: 'toast-bottom-center'});
        this.toastr.error(error.message, "Major Error", {
          positionClass: "toast-center-center"
        });
        this.loading = false;
      }
    );
  }

  loadDynamicContent(event) {
    console.log(event);
    this.loading = true;
    switch (event) {
      case 0:
        this.loading = false;
        console.log(this.customerData);
        break;
      case 1:
        if (
          !this.bureauAnalysisData ||
          !this.bureauScoreReasons ||
          !this.bureauEMI
        ) {
          this.userService
            .getbureauAnalysisData(this.mobileNo, this.authToken)
            .subscribe(
              data => {
                console.log(data);
                this.loading = false;
                if (data === null) {
                  this.dataNotAvailable = true;
                  //  this.toastr.error(
                  //    "No data available for " + this.mobileNo,
                  //    "Unavailable!",
                  //    { positionClass: "toast-center-center" }
                  //  );
                } else {
                  this.bureauAnalysisData = data["bureauAnalysisData"];
                  this.bureauScoreReasons = data["bureauScoreReasons"];
                  this.bureauEMI = data["bureauEMI"];
                }
              },
              error => {
                console.log(error);
                this.toastr.error(error.message, "Major Error", {
                  positionClass: "toast-center-center"
                });
                this.loading = false;
              }
            );
        } else {
          this.loading = false;
        }
        break;
      case 2:
        console.log("second");
        if (!this.enquiry1 || !this.enquiry2) {
          this.userService
            .getbureauEnquiryData(this.mobileNo, this.authToken)
            .subscribe(
              data => {
                console.log(data);
                this.loading = false;
                if (data === null) {
                  this.dataNotAvailable = true;
                  //  this.toastr.error(
                  //    "No data available for " +
                  //      this.mobileNo,
                  //    "Unavailable!",
                  //    { positionClass: "toast-center-center" }
                  //  );
                } else {
                  this.enquiry1 = data["enquiry1"];
                  this.enquiry2 = data["enquiry2"];
                }
              },

              error => {
                console.log(error);
                this.toastr.error(error.message, "Major Error", {
                  positionClass: "toast-center-center"
                });
                this.loading = false;
              }
            );
        } else {
          this.loading = false;
        }

        break;
      case 3:
        console.log("third");
        console.log(document.body.scrollTop);
        if (
          !this.smsData ||
          !this.salary ||
          !this.balance ||
          !this.nach ||
          !this.bureau ||
          !this.companySalary ||
          !this.loan ||
          !this.score ||
          !this.allSMSData
        ) {
          this.userService.getSMSData(this.mobileNo, this.authToken).subscribe(
            data => {
              console.log(data);

              this.loading = false;
              if (data === null) {
                this.dataNotAvailable = true;
                // this.toastr.error(
                //   "No data available for " + this.mobileNo,
                //   "Unavailable!",
                //   { positionClass: "toast-center-center" }
                // );
              } else {
                this.smsData = data["smsData"];
                this.salary = data["salary"];
                this.balance = data["balance"];
                this.nach = data["nach"];
                this.bureau = data["bureau"];
                this.companySalary = data["companySalary"];
                this.loan = data["loan"];
                this.score = data["score"];
                this.allSMSData = data["allSMSData"];
                JSON.stringify(data["allSMSData"]);
              }
            },

            error => {
              console.log(error);
              this.toastr.error(error.message, "Major Error", {
                positionClass: "toast-center-center"
              });
              this.loading = false;
            }
          );
        } else {
          this.loading = false;
        }

        break;
      case 4:
        if (!this.wifiConnectionInfo || !this.smsData || !this.deviceData) {
          this.userService
            .getDeviceData(this.mobileNo, this.authToken)
            .subscribe(
              data => {
                console.log(data);
                this.loading = false;
                if (data === null) {
                  this.dataNotAvailable = true;
                  //  this.toastr.error(
                  //    "No data available for " +
                  //      this.mobileNo,
                  //    "Unavailable!",
                  //    { positionClass: "toast-center-center" }
                  //  );
                } else {
                  this.accountInfo = data["accountInfo"];
                  this.wifiConnectionInfo = data["wifiConnectionInfo"];
                  this.deviceData = data["deviceData"];
                  console.log(
                    this.wifiConnectionInfo,
                    this.smsData,
                    this.deviceData
                  );
                }
              },
              error => {
                console.log(error);
                this.toastr.error(error.message, "Major Error", {
                  positionClass: "toast-center-center"
                });
                this.loading = false;
              }
            );
        } else {
          this.loading = false;
        }
        break;
      case 5:
        if (!this.bureauJSON) {
          this.userService
            .getbureauAnalysisJSON(this.mobileNo, this.authToken)
            .subscribe(
              data => {
                console.log(data);
                this.loading = false;
                if (data === null) {
                  this.dataNotAvailable = true;
                  //  this.toastr.error(
                  //    "No data available for " + this.mobileNo,
                  //    "Unavailable!",
                  //    { positionClass: "toast-center-center" }
                  //  );
                } else {
                  this.bureauJSON = data["jsonData"];
                  console.log(this.bureauJSON);
                  console.log(this.bureauJSON);
                  for (let index = 0; index < this.bureauJSON.length; index++) {
                    const elem = this.bureauJSON[index];
                    console.log(elem.value);
                    elem.value = JSON.parse(elem.value);
                  }
                  console.log(this.bureauJSON);
                }
              },
              error => {
                console.log(error);
                this.toastr.error(error.message, "Major Error", {
                  positionClass: "toast-center-center"
                });
                this.loading = false;
              }
            );
        } else {
          this.loading = false;
        }
        break;
      default:
        console.log("default code block");
    }
  }
}

Answer 1

在documentation描述的@Output可以帮助您：

@Output()
selectedTabChange: EventEmitter<MatTabChangeEvent>

您应该收听selectedTabChange事件以获取当前标签索引（MatTabChangeEvent.index），然后存储此索引的滚动位置。如果您已为此标签添加selectedTabChange，则在scrolloffset上进行恢复。

所以在容器组件中（示例可能包含语法错误）

HTML:

<div flex class="tabs-wrapper" appTrackScroll (pageYPositionChange)="onPageYChange($event)" > 
  <mat-tab-group class="demo-tab-group" (selectedIndexChange)="loadDynamicContent($event)"
(selectedTabChange)="onSelectedTabChange($event)">

...

TS :

private mapTabToScroll = {};
private currentTabIndex = 0;

function onPageYChange (scrollTop: number) {

if(scrollTop !==0)  {
mapTabToScroll[currentTabIndex] = scrollTop;
}
}

function onSelectedTabChange (tabChange: MatTabChangeEvent) {
    this.currentTabIndex = tabChange.index;

    if (mapTabToScroll[currentTabIndex]) {
        // restore scroll to mapTabToScroll[currentTabIndex] value
    }
}

如何使用大块数据保留角度材质选项卡上的滚动位置

1 个答案: