community/tutorials/angular_router

Angular Router 是 Angular 框架中用于管理和导航应用程序路由的核心组件。它允许开发者定义应用程序的导航路径，并在用户与应用程序交互时动态地更新视图。

安装 Angular Router

首先，确保你已经安装了 Angular CLI。如果没有，请通过以下命令安装：

npm install -g @angular/cli

然后，在你的 Angular 项目中，使用以下命令安装 Angular Router：

ng add @angular/router

基本路由配置

在 Angular 应用程序中，路由配置通常位于 app-routing.module.ts 文件中。以下是一个简单的路由配置示例：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TutorialsComponent } from './tutorials.component';

const routes: Routes = [
  { path: 'tutorials', component: TutorialsComponent }
];

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

在这个例子中，我们定义了一个名为 tutorials 的路由，它将导航到 TutorialsComponent 组件。

使用 Angular Router

要在组件中使用 Angular Router，你可以使用 RouterModule 提供的指令，如 <router-outlet> 和 <router-link>。

以下是一个使用 Angular Router 的组件示例：

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

@Component({
  selector: 'app-tutorials',
  template: `
    <h1>Tutorials</h1>
    <router-outlet></router-outlet>
  `
})
export class TutorialsComponent {
  constructor(private router: Router) {}

  navigateToTutorial() {
    this.router.navigate(['tutorials', 'angular-router']);
  }
}

在这个例子中，我们创建了一个名为 TutorialsComponent 的组件，它包含一个导航按钮。当用户点击这个按钮时，应用程序将导航到 /tutorials/angular-router 路径。

扩展阅读

想了解更多关于 Angular Router 的信息？请阅读官方文档：Angular Router Guide

Angular Router