【发布时间】：2018-01-31 06:12:06
【问题描述】：
我正在使用角度材料垫选项卡，并且在单击该选项卡时动态加载每个选项卡的数据。每个选项卡都有大量数据。所以我修复了 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");
}
}
}
【问题讨论】：
-
这是角度材料github.com/angular/material2/issues/9592中的一个错误
标签： angular