[英]Angular Routing and Navigating
My app.component.html
is very light我的
app.component.html
很轻
<div class="landing-page">
<div class="main">
<router-outlet></router-outlet>
<div class="footer">
<div class="logo-wrapper">
<a routerLink="/"><img src="assets/images/logo.png" srcset="assets/images/logo@2x.png 2x,assets/images/logo@3x.png 3x" /></a>
</div>
</div>
</div>
</div>
I have a the following routes defined in AppRoutingModule
:我在
AppRoutingModule
定义了以下路由:
const routes: Routes = [
{ path: 'book/:id', component: BookComponent },
{ path: '**', component: LandingPageComponent }
];
in my LandingPageComponent
I'm navigating to the book
like this:在我的
LandingPageComponent
我像这样导航到这book
:
constructor(private router: Router) {
}
OpenBookComponent(id){
this.router.navigate(["/book", id], {skipLocationChange: true});
}
Up to this point everything works perfect.到目前为止,一切都很完美。
The problem start when returning to the main page by navigating to ["/"]
导航到
["/"]
返回主页时出现问题
Both clicking back <
in the browser or programmatically trying to navigate from BookComponent
to the base link, reveal the full path in the address bar (ie: http://localhost:4200/book/123
) and results in displaying only the footer在浏览器中单击返回
<
或以编程方式尝试从BookComponent
导航到基本链接,在地址栏中显示完整路径(即: http://localhost:4200/book/123
)并导致仅显示页脚
my code navigating back in BookComponent
is:我在
BookComponent
导航回的BookComponent
是:
constructor(private route: ActivatedRoute, private router: Router) {
}
ngOnInit() {
this.id = this.route.snapshot.paramMap.get('id');
}
closeBook(){
this.router.navigate(["/"], {skipLocationChange: true});
}
How can I clear all parameters from the address when going back, so it remains just /
or http://localhost:4200
?返回时如何清除地址中的所有参数,使其保持为
/
或http://localhost:4200
?
You don't have to delete the parameters.您不必删除参数。 You must just add a new route like this:
您必须像这样添加一条新路线:
const routes: Routes = [
{ path: 'book/:id', component: BookComponent },
{ path: '', component: LandingPageComponent },
{ path: '**', component: LandingPageComponent }
];
Now if you want to navigate to "['/']"
, you can write it like this, as an example:现在如果你想导航到
"['/']"
,你可以这样写,例如:
<a [routerLink]="['/']" class="nav-link active">Back</a>
And now it would display the component, where you have written behind ''
in the angular routes array, in this case the LandingPageComponent
.现在它会显示组件,你在
''
后面写了 angular routes 数组,在这种情况下是LandingPageComponent
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.