Как убрать путь #route после клика в меню - PullRequest
Новая
       16

Как убрать путь #route после клика в меню

0 голосов
/ 26 марта 2019

У меня есть небольшое меню, которое помогает пользователю перемещаться по одной и той же странице, прокручивая до опции: 

<div class="listContainer">
   <div class="row">
      <div class="list-group" id="list-tab" routerLinkActive="active-link">
        <ul>
           <li><a routerLink="./" [fragment]="'stockunityinformation_title'">Stock Unity Information</a></li>
           <li><a routerLink="./" [fragment]="'addtionalreferences_title'">Addtional references</a></li>
           <li><a routerLink="./" [fragment]="'warehouse_information_title'">Warehouse Information</a></li>
           <li><a routerLink="./" [fragment]="'serialnumber_title'">Serial Number</a></li>
           <li><a routerLink="./" [fragment]="'TransactionHistory_title'">Transaction History</a></li>
        </ul>
    </div>
 </div>
</div>

Проблема в том, что если пользователь щелкает, например, на опции «TransactionHistory_title», прокручивает вверх, а затем снова нажимает на ту же опцию, он не будет работать, потому что маршрут уже задан в URL.

Как я могу «сбросить» маршрут после клика?

локальный: 4200 / DetailView # TransactionHistory_title

Вместо приведенного выше примера, после щелчка и перенаправления на элемент, создайте URL-адрес, подобный следующему:

локальный: 4200 / DetailView

У меня нет большого опыта работы с angular и html, поэтому, если возможно, сделайте объяснение новичку дружественным.

Большое спасибо! =)

Ответы [ 2 ]

1 голос
/ 26 марта 2019

Я использую для прокрутки пакет ngx-scroll 

<button [ngx-scroll-to]="'#destination'">Go to destination</button>

 <div id="destination">
   You've reached your destination.
 </div>

  npm i @nicky-lenaers/ngx-scroll-to

пакет ngx-schroll-to 

...
 import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
 ...

@NgModule({
 imports: [
  ...
  ScrollToModule.forRoot()
  ],
  ...
 bootstrap: [AppComponent]
  })
 export class AppModule { }
0 голосов
/ 26 марта 2019

Вы можете попробовать это. 

<a [routerLink]="['/']" [queryParams]="{}"> Applications</a>

или это 

<a [routerLink]="['/']" [queryParams]="{selected: true}"> Applications</a>

или это 

this._router.navigate(['/'], {queryParams: {selected: true}});

или это 

this.router.navigate(['/'], { fragment: 'top' });
...