Angular 2 路线 [英] Angular 2 Routes
本文介绍了Angular 2 路线的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的 app.html 中有一个路由器插座.问题是我有 3 个(post、admin、addposts)组件,除了 app.component.在我的帖子组件中,我有一个下拉菜单,我点击下拉菜单,我想加载 addposts 和网址应该看起来像这个帖子/添加帖子.任何想法如何做到这一点
I have one router-outlet in my app.html .problem is i have 3 (post,admin,addposts)component except app.component .in my posts component i have dropdown menu onece i click dropdown i want load addposts and the url should be look like this post/addposts. any idea how to do this
这是我的 app.routes.ts
this is my app.routes.ts
const routes: Routes = [
{ path: '', redirectTo: 'main', pathMatch: 'full'},
{ path: 'main', component:AdminBodyComponent },
{ path: 'admin', component:AdminComponent },
{ path: 'posts',component:PostsComponent},
{ path: 'addposts',component:AddPostComponent}];
推荐答案
first install router via: npm install router
first install router via: npm install router
import { Routes, RouterModule } from '@angular/router';
export const router: Routes = [
{ path: '', redirectTo: 'main', pathMatch: 'full'},
{ path: 'main', component:AdminBodyComponent },
{ path: 'admin', component:AdminComponent },
{ path: 'posts',component:PostsComponent},
{ path: 'addposts',component:AddPostComponent}];
export const routes: ModuleWithProviders = RouterModule.forRoot(router);
step2:
inject into your .ts file
constructor(
private router:Router,
...
)
step3:
this.router.navigate(['/addposts']);
step4:
<base href="/">
如果你想使用特定的路由器去这个第四步:
if you want to use specific router go for this step4:
这篇关于Angular 2 路线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文