详解Angular2实现ng2-router 路由和嵌套路由

Angular2是一个流行的前端框架，它提供了强大的路由功能，可以帮助我们构建单页应用程序。ng2-router是Angular2中的一个路由模块，它可以帮助我们实现路由和嵌套路由。

安装ng2-router

首先，我们需要安装ng2-router。可以通过以下命令使用npm进行安装：

npm install ng2-router --save

配置路由

在Angular2应用程序的根模块中，我们需要配置路由。打开根模块文件（通常是app.module.ts），并添加以下代码：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppModule { }

在上面的代码中，我们定义了三个路由：首页（HomeComponent）、关于页面（AboutComponent）和联系页面（ContactComponent）。我们使用path属性指定了每个路由的URL路径，并使用component属性指定了每个路由对应的组件。

添加路由出口

在应用程序的主组件模板中，我们需要添加一个路由出口，用于显示当前路由对应的组件。打开主组件的模板文件（通常是app.component.html），并添加以下代码：

<router-outlet></router-outlet>

创建组件

现在，我们需要创建三个组件：HomeComponent、AboutComponent和ContactComponent。可以使用Angular CLI的命令来生成这些组件：

ng generate component home
ng generate component about
ng generate component contact

这将在项目中生成三个组件，并自动更新根模块文件中的导入语句。

示例说明

示例1：基本路由

假设我们的应用程序有一个首页，我们希望在访问根URL时显示该页面。我们已经在根模块中配置了路由，现在我们需要创建一个HomeComponent来显示首页的内容。

首先，打开home.component.ts文件，并添加以下代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: '<h1>Welcome to the Home Page!</h1>'
})
export class HomeComponent { }

接下来，打开home.component.html文件，并添加以下代码：

<h1>Welcome to the Home Page!</h1>

现在，当我们访问根URL时，将显示\"Welcome to the Home Page!\"的文本。

示例2：嵌套路由

假设我们的应用程序有一个关于页面，该页面包含关于我们的信息和团队成员的列表。我们希望在访问\"/about\"时显示关于页面，并在\"/about/team\"时显示团队成员列表。

首先，打开about.component.ts文件，并添加以下代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: `
    <h1>About Us</h1>
    <p>Welcome to our website!</p>
    <a routerLink=\"/about/team\">Meet our team</a>
    <router-outlet></router-outlet>
  `
})
export class AboutComponent { }

接下来，打开about.component.html文件，并添加以下代码：

<h1>About Us</h1>
<p>Welcome to our website!</p>
<a routerLink=\"/about/team\">Meet our team</a>
<router-outlet></router-outlet>

现在，当我们访问\"/about\"时，将显示\"About Us\"和\"Welcome to our website!\"的文本，并且有一个链接\"Meet our team\"。当我们点击该链接时，将加载团队成员列表的组件，并显示在<router-outlet></router-outlet>中。

这就是使用ng2-router实现路由和嵌套路由的完整攻略。你可以根据自己的需求配置更多的路由和嵌套路由，并创建相应的组件来显示内容。希望这对你有帮助！

阅读剩余 60%