Angular 2 条路线

Question

我的 app.html 中有一个路由器插座。问题是我有 3 个 (post,admin,addposts) 组件，除了 app.component .in我的 posts 组件我有下拉菜单，一旦我单击下拉菜单，我想加载 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

俄普里昂 1：

如果你能添加一个锚标签，那将是最简单的。

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

选项 2：

遵循这 3 个简单的步骤。

第 1 步：导入 angular 路由器

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

第 2 步：使用依赖注入注入值

constructor(
      private router:Router,
      ...
)

第 3 步：在您的点击事件中调用 navigate()

this.router.navigate(['/addposts']);

Answer 2

我假设您想导航到另一个页面，因为您想路由到 post/addposts。然后你可以改变你的路径到这个

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

我可能错了，您可能想改用多个路由器插座。

Answer 3

首先通过以下方式安装路由器：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']);

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

Answer 4

首先通过以下方式安装路由器：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="/">

如果您想使用特定的路由器，请执行此操作第四步：

Angular 2 条路线

Angular 2 Routes

angular-routing

angular