在Angular 4中,路由出口管理可以通过使用
元素和
指令来实现。下面是一个包含代码示例的解决方法:
首先,确保已经安装了最新版本的 Angular CLI,并创建一个新的 Angular 4 应用程序。
在 app.module.ts 文件中,导入RouterModule
和Routes
,并定义一个路由数组:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在 app.component.html 文件中,添加一个
元素,该元素将用于显示路由组件:
现在,您可以在应用的根组件中使用路由了。在 app.component.ts 文件中,导入路由模块并在组件类中声明它:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private router: Router) {}
goToHome() {
this.router.navigate(['/home']);
}
goToAbout() {
this.router.navigate(['/about']);
}
}
现在,您可以在 app.component.html 文件中添加一些导航链接,以便在单击时导航到相应的路由组件:
最后,您需要在相应的组件文件中创建HomeComponent
和AboutComponent
。您可以使用 Angular CLI 来自动生成这些组件:
ng generate component home
ng generate component about
生成的组件将分别位于 home.component.ts 和 about.component.ts 文件中。
这就是一个简单的示例,展示了如何在 Angular 4 中使用路由。您可以根据自己的需求进行进一步的扩展和定制。