[英]How to clean the #route path after the click in the menu
I have a small menu that helps the user to navigate around the same page by scrolling to the option: 我有一个小菜单,可通过滚动到以下选项来帮助用户浏览同一页面:
<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>
The problem with this is that if the user clicks at the option "TransactionHistory_title" for example, scroll up and then click at the same option again, it wont work because the route is set in the url already. 这样做的问题是,例如,如果用户单击选项“ TransactionHistory_title”,向上滚动,然后再次单击相同的选项,则该方法将不起作用,因为该路径已在url中设置。
How can I 'reset' the route after the click? 点击后如何“重置”路线?
localhost:4200/detailview#TransactionHistory_title 本地主机:4200 /的DetailView#TransactionHistory_title
Instead of having the example above, after the click and the redirect to the element, have an URL like this: 在单击并重定向到该元素之后,请使用以下URL,而不是上面的示例:
localhost:4200/detailview 本地主机:4200 /的DetailView
I don't have much experience with angular and html so please, if possible, make the explanation newbie friendly. 我没有关于angular和html的丰富经验,因此,请尽可能使说明新手友好。
Thank you very much! 非常感谢你! =)
=)
I'm use for scroll ngx-scroll package 我用于滚动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 package ngx-schroll-to软件包
...
import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
...
@NgModule({
imports: [
...
ScrollToModule.forRoot()
],
...
bootstrap: [AppComponent]
})
export class AppModule { }
You can try this. 你可以试试看
<a [routerLink]="['/']" [queryParams]="{}"> Applications</a>
or this 或这个
<a [routerLink]="['/']" [queryParams]="{selected: true}"> Applications</a>
or this 或这个
this._router.navigate(['/'], {queryParams: {selected: true}});
or this 或这个
this.router.navigate(['/'], { fragment: 'top' });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.