Merge pull request #338 from Ryanhui/webweb

查看图片后退滚动条位置改变问题

6 files changed, 23 insertions, 5 deletions

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index a2917c2..93b55d9 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -15,7 +15,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 4165df9..c9e7ff7 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -28,7 +28,7 @@
       <span>dress</span>
     </mat-toolbar>
     <!-- Add Content Here -->
-    <router-outlet></router-outlet>
+    <router-outlet ></router-outlet>
   </mat-sidenav-content>
 </mat-sidenav-container>
 
diff --git a/src/app/photo/photo.component.html b/src/app/photo/photo.component.html
index fc136e1..dde1ea7 100644
--- a/src/app/photo/photo.component.html
+++ b/src/app/photo/photo.component.html
@@ -1,6 +1,6 @@
 <div id="wrapper">
   <mat-toolbar color="primary">
-    <button type="button" mat-icon-button (click)="location.back()">
+    <button type="button" mat-icon-button (click)="goBack()">
       <mat-icon>arrow_back</mat-icon>
     </button>
     <span></span>
diff --git a/src/app/photo/photo.component.ts b/src/app/photo/photo.component.ts
index e444021..6e28823 100644
--- a/src/app/photo/photo.component.ts
+++ b/src/app/photo/photo.component.ts
@@ -57,7 +57,13 @@ export class PhotoComponent {
     private breakpointObserver: BreakpointObserver,
     public location: Location,
     private ref: ChangeDetectorRef
-  ) {}
+  ) {
+    this.location = location; 
+  }
+
+  goBack() {
+    this.location.back()
+  }
 
   async load() {
     this.ref.markForCheck();
diff --git a/src/app/photos/photos.component.html b/src/app/photos/photos.component.html
index f102a72..0310250 100644
--- a/src/app/photos/photos.component.html
+++ b/src/app/photos/photos.component.html
@@ -4,7 +4,7 @@
     <span class="author">{{commit.username}}</span>
     <span class="message" *ngIf="commit.message">{{commit.message}}</span>
   </h4>
-  <a *ngFor="let file of commit.files" [routerLink]="file">
+  <a *ngFor="let file of commit.files" [routerLink]="file" (click)="onPhotoClick()">
     <img [src]="'Dress/' + file">
   </a>
 </div>
diff --git a/src/app/photos/photos.component.ts b/src/app/photos/photos.component.ts
index 3c5a25e..f2f341b 100644
--- a/src/app/photos/photos.component.ts
+++ b/src/app/photos/photos.component.ts
@@ -19,13 +19,25 @@ interface Commit {
 })
 export class PhotosComponent {
   photos: Commit[];
+  scrollTop: number;
+
+  // I don't know what it used for, but it works fine.
+  ngAfterContentChecked() {
+    let scrollTop = sessionStorage.getItem('scrollTop');
+    document.querySelector('body > app-root > mat-sidenav-container > mat-sidenav-content').scrollTop = Number(scrollTop) || 0
+  }
 
   constructor() {
     this.photos = photos.map(this.parseAuthor);
+    this.scrollTop = 0;
   }
 
   parseAuthor(commit: Commit) {
     const [author, username, email] = commit.author.match(/(.+?) <(.+?)>/);
     return { username, email, ...commit };
   }
+  onPhotoClick() {
+    this.scrollTop = document.querySelector('body > app-root > mat-sidenav-container > mat-sidenav-content').scrollTop;
+    sessionStorage.setItem('scrollTop', String(this.scrollTop));
+  }
 }