以角度添加到按钮的路由 - Javascript

在Web应用程序中，路由是一种将URL映射到特定功能或操作的技术。在JavaScript中，我们可以使用一些框架或库来帮助我们管理路由。在本文中，我们将讨论如何将角度添加到按钮的路由。

什么是角度？

Angular是一个用于构建单一页面应用程序的框架。它包含许多有用的功能，例如路由，模块和组件。通过使用角度，我们可以轻松地构建灵活的Web应用程序。

添加角度路由

首先，我们需要确保我们已经安装了角度并在我们的应用程序中引入了它。然后，我们可以设置我们的路由。

在这个例子中，我们将创建一个由两个组件组成的简单应用程序：主页和关于页。我们将使用按钮来导航到这些页面。

创建组件

首先，我们将创建两个组件：主页和关于页。我们可以使用命令ng generate component home和ng generate component about来生成这些组件。

ng generate component home
ng generate component about

这将在我们的应用程序中创建两个新的组件：HomeComponent和AboutComponent。

配置路由

接下来，我们将配置我们的路由。为此，我们将打开app.module.ts文件并添加以下代码：

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

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

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

这里，我们定义了两个路由。一个是空路由，它将显示主页组件。另一个是关于路由，它将显示关于组件。我们使用Angular的RouterModule来设置这些路由。

添加导航链接

现在，我们已经设置了我们的路由，让我们在我们的按钮中添加它们。为此，我们将在app.component.html文件中添加以下代码：

<nav>
  <ul>
    <li><a routerLink="/">Home</a></li>
    <li><a routerLink="/about">About</a></li>
  </ul>
</nav>

<router-outlet></router-outlet>

这里，我们使用routerLink指令将我们的按钮链接到我们的路由。我们还使用<router-outlet>标记来显示我们的组件。

编写组件代码

我们还需要为我们的组件编写代码，以确保它们正确地呈现在页面上。让我们打开我们的主页组件文件和我们的关于组件文件并添加以下代码：

// HomeComponent

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
  constructor() { }
}

// AboutComponent

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

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
})
export class AboutComponent {
  constructor() { }
}

这里，我们定义了两个Angular组件，每个组件都有一个带有一些CSS的HTML模板。

确认一切正常

现在，我们已经设置了我们的路由，并将它们添加到我们的按钮中。让我们启动我们的应用程序并确保一切都按预期工作。为此，我们可以使用命令ng serve并在浏览器中导航到http://localhost:4200。

ng serve

现在，我们已经成功地将角度添加到我们的按钮的路由中。现在您可以轻松地将路由添加到您的角度应用程序中，并以可读易懂的方式为用户提供导航。

总结

在本文中，我们了解了如何将角度添加到我们的按钮的路由中。我们创建了两个组件，并通过使用routerLink指令将它们链接到我们的路由。我们还编写了组件代码以确保它们正确显示在页面上。最后，我们确认了所有内容正常工作。

现在，您可以根据需要扩展此示例，并使用角度实现更强大的路由系统。