如何在Angular 2中设置基本路由？(How do I set up Basic Routing in Angular 2?)

如何在Angular 2中设置基本路由？(How do I set up Basic Routing in Angular 2?)

我试图从文档中了解Angular 2中的基本路由是如何工作的，但是我没有得到它。

我设置了一个PLUNK ，我有一个导航栏。 目标是让“关于”按钮将用户带到about组件。 组件已经在插件中。

我最初在这里写了更多，但它归结为我不明白为什么我的路由不起作用的事实（我觉得我设置正确）：

<a routerLink="/home-page" routerLinkActive="active">Home</a>

单击时该代码不执行任何操作。 我的路线定义如下：

import { Routes } from '@angular/router'; import { AboutPage } from './about-page.component.ts' import { HomePage } from './home-page.component.ts' export const appRoutes: Routes = [ { path: 'home-page', component: HomePage }, { path: 'about-page', component: AboutPage } ];

此外，无论出于何种原因，在navbar.components.ts中放置<router-outlet></router-outlet> navbar.components.ts显示路由器出口未找到并抛出。 此外，我99％确定基本href设置正确，所以可能不需要检查。

简而言之，我如何使我的路线工作？

I am trying to understand how very basic routing works in Angular 2 from the docs and I don't get it.

I set up a PLUNK where I have a navbar. The goal is to have the 'About' button take the user to the about component. The components are already in the plunk.

I initially wrote more here, but it comes down to the fact that I don't understand why my routing doesn't work (I feel like I set it up correctly):

<a routerLink="/home-page" routerLinkActive="active">Home</a>

That code doesn't do anything when clicked. My route definitions look like this:

import { Routes } from '@angular/router'; import { AboutPage } from './about-page.component.ts' import { HomePage } from './home-page.component.ts' export const appRoutes: Routes = [ { path: 'home-page', component: HomePage }, { path: 'about-page', component: AboutPage } ];

Also, for whatever reason, putting <router-outlet></router-outlet> in navbar.components.ts shows router-outlet as not found and throws. Also, I am 99% percent sure that base href is set up correctly, so probably no need to check that.

In short, how do I make my routes work?

最满意答案

1）将所有.ts文件添加到src文件夹中

---

2）您需要导入 RouterModule ，然后将其与 forRoot（）方法一起使用 ，如 app.routing.ts所示

import { Routes,RouterModule } from '@angular/router'; export const routing = RouterModule.forRoot(appRoutes);

---

3）现在，您需要在 @ NgModule的导入元数据中导入 路由 。

@NgModule({ imports: [ BrowserModule,routing ], ... })

---

4）最后，在 app.routing.ts中添加了 默认路由

export const appRoutes: Routes = [ {path:'',redirectTo:'home-page',pathMatch: 'full'}, ... ... ];

---

工作演示： http ： //plnkr.co/edit/mEvR1vU8EEkctNikaNAi?p=preview

1) added all .ts files into src folder

---

2) You need to import RouterModule and then use it with forRoot() method as shown in app.routing.ts

import { Routes,RouterModule } from '@angular/router'; export const routing = RouterModule.forRoot(appRoutes);

---

3) Now, you need to import routing in @NgModule's imports metadata.

@NgModule({ imports: [ BrowserModule,routing ], ... })

---

4) Last, added default route in app.routing.ts

export const appRoutes: Routes = [ {path:'',redirectTo:'home-page',pathMatch: 'full'}, ... ... ];

---

Working Demo : http://plnkr.co/edit/mEvR1vU8EEkctNikaNAi?p=preview