如何以角度从一页导航到另一页 - TypeScript

在 TypeScript 中，可以通过 Angular 框架来实现页面导航。这里我们介绍如何通过角度实现从一页导航到另一页。

步骤

安装角度 CLI

要使用角度，首先需要安装角度 CLI（命令行界面）工具。

在终端中运行以下命令：

npm install -g @angular/cli

创建新的角度项目

使用以下命令创建新的角度项目：

ng new my-app

创建一个新的组件

使用以下命令创建一个新的组件：

ng generate component my-component

导航到另一个组件

要导航到另一个组件，需要在组件之间创建一个路由。

在 app-routing.module.ts 文件中导入 RouterModule 和需要导航到的组件，然后定义一个路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyComponent } from './my-component/my-component.component';

const routes: Routes = [
  { path: 'my-component', component: MyComponent }
];

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

在你的组件的 HTML 中添加一个链接：

<a routerLink="/my-component">Go to My Component</a>

现在，当用户单击链接时，将导航到 MyComponent 组件。

结论

这就是通过角度实现从一页导航到另一页的完整过程。借助这个简单的示例，你可以了解到如何创建一个组件，如何设置路由以及如何链接不同的组件。