Angular 2 Routes

Question

我有一个路由器插座在我的app.html .problem是我有3（后，管理员，addposts）组件除了app.component .in我的帖子组件我有下拉菜单onece我点击下拉我想加载addposts和url应该看起来像这个post/addposts。任何想法如何做到这一点

这是我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}]; 

Answer 1

通过先安装路由器：NPM安装路由器

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="/">

，如果你想使用特定的路由器去为这个 第四步：

Answer 2

Oprion 1：

如果你可以添加一个锚标记，这将是最简单的。

<a routerLink="/addposts" routerLinkActive="active">Add Post</a> 

选项2：

按以下3个简单的步骤。

步骤1：导入角路由器

import { Router } from '@angular/router'; 

步骤2：使用依赖注入注入的值

constructor(
     private router:Router, 
     ... 
) 

步骤3：调用引导（）中的点击内部事件

this.rou ter.navigate（[ '/ addposts']）;

Answer 3

我假设你想导航到不同的页面，因为你想要路由到post/addposts。然后你可以改变你的路径

{ path: 'post/addposts',component:AddPostComponent}]; 

我可能是错的，你可能想改为使用多个router-outlet。

Answer 4

首先通过安装路由器：NPM安装路由器

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']);

如果要使用特定的路由器去为这个 第四步 ：