ng 路由器链接 - Html (1)

📌 相关文章

📜 ng 路由器链接 - Html (1)

📅 最后修改于: 2023-12-03 15:33:06.702000 🧑 作者: Mango

使用 Angular 的路由器来链接 HTML 页面

在使用 Angular 开发 Web 应用程序时，我们通常需要使用路由器将不同的页面链接起来。这样可以使用户更方便地访问和浏览页面。

步骤

下面是使用 Angular 中的路由器来链接 HTML 页面的步骤：

步骤 1：创建 HTML 页面

首先，你需要创建你要链接的 HTML 页面。创建一个 HTML 文件，并添加你要显示的内容。

下面是一个简单的 HTML 页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
</head>
<body>
    <h1>Welcome to my website</h1>
    <p>This is my first webpage.</p>
</body>
</html>

步骤 2：创建 Angular 应用程序

在创建路由之前，你需要先创建 Angular 应用程序。如果你已经有一个应用程序，则可以跳过这一步。

要创建新的应用程序，请打开你的命令提示符或终端，并执行以下命令：

ng new my-app
cd my-app

步骤 3：设置路由

在应用程序中设置路由。要设置路由，请打开你的 app-routing.module.ts 文件。添加以下代码：

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

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'page2', component: Page2Component },
  { path: 'page3', component: Page3Component }
];

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

最重要的代码如下：

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'page2', component: Page2Component },
  { path: 'page3', component: Page3Component }
];

这里我们定义了三个路由：一个默认路由（指向 HomeComponent）、一个路由到页 2（指向 Page2Component）和一个路由到页 3（指向 Page3Component）。

步骤 4：创建 Angular 组件

在设置路由之前，你需要创建 Angular 组件。如果你已经有组件，则可以跳过这一步。

要创建新的组件，请打开你的命令提示符或终端，并执行以下命令：

ng generate component home
ng generate component page2
ng generate component page3

步骤 5：在 HTML 文件中添加路由链接

现在你已经创建了你要链接的 HTML 页面，你已经设置了路由，并创建了组件。下一步是在 HTML 页面中添加路由链接。这些链接将指向你在路由中定义的不同的页面。

要添加路由链接，请使用以下代码：

<nav>
  <ul>
    <li><a routerLink="/" routerLinkActive="active">Home</a></li>
    <li><a routerLink="/page2" routerLinkActive="active">Page 2</a></li>
    <li><a routerLink="/page3" routerLinkActive="active">Page 3</a></li>
  </ul>
</nav>

运行和测试

要运行和测试你的应用程序，请打开你的命令提示符或终端，并执行以下命令：

ng serve --open

这将自动打开你的应用程序，并在浏览器中打开它。

结论

这就是 Angular 中如何使用路由器来链接 HTML 页面的方法。通过这个简单的例子，你可以学习如何设置路由、创建链接以及如何在应用程序中显示不同的页面。