在Angular 2中,路由和子路由的实现是通过Angular的路由模块来完成的。下面是一个简单的示例,展示了如何在Angular 2中使用路由和子路由。
首先,需要在Angular应用的根模块中导入所需的模块和组件:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent }
])
],
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
ContactComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
在上述代码中,我们导入了Angular的BrowserModule
、RouterModule
模块以及我们自己定义的组件。然后在@NgModule
装饰器中,使用RouterModule.forRoot()
方法定义了路由配置。在这个例子中,我们定义了三个路由:根路由,以及名为about
和contact
的子路由。
然后,在应用的根组件中,我们需要添加一个
标签,用于显示当前路由对应的组件:
My Angular App
在上述代码中,我们使用routerLink
指令来定义导航链接,点击链接时会触发相应的路由。
标签会根据当前路由显示对应的组件。
最后,我们需要为每个路由对应的组件创建独立的组件文件,并在根模块中进行引入和声明。以下是每个组件的简单实现示例:
// home.component.ts
import { Component } from '@angular/core';
@Component({
template: 'Welcome to the Home Page
'
})
export class HomeComponent { }
// about.component.ts
import { Component } from '@angular/core';
@Component({
template: 'About Us
'
})
export class AboutComponent { }
// contact.component.ts
import { Component } from '@angular/core';
@Component({
template: 'Contact Us
'
})
export class ContactComponent { }
这样,我们就完成了在Angular 2中使用路由和子路由的基本配置。当用户点击导航链接时,会根据定义的路由配置显示相应的组件。