Angular 9/10 中的路由

Angular 中的路由允许用户创建具有多个视图的单页应用程序，并允许在它们之间导航。用户可以在这些视图之间切换而不会丢失应用程序状态和属性。

方法：

创建一个要使用的 Angular 应用程序。
在应用程序组件内创建导航链接，然后为每个路由提供“routerLink”指令，并将路由值传递给“routerLink”指令。
然后将路由添加到 routing.module.ts 文件中，然后将 routing.module.ts 导入到 app.module.ts 文件中。

句法：

HTML：

About Us

TS：

{ path: 'about', component: AboutComponent }

示例：我们将创建一个使用角度路由的简单角度应用程序。因此，首先，我们通过在 CLI 中运行以下命令来创建一个 Angular 应用程序。

ng new learn-routing

然后我们正在创建简单的导航，允许我们在不同的组件之间导航，我们还创建了一些组件，因此用户可以使用路由在这些组件之间切换。

app.component.html


    
        Home
        Products
        About Us
        Contact Us

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component'
import { ProductComponent } from './product.component'
import { AboutComponent } from './about.component'
import { ContactComponent } from './contact.component'
  
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent, },
];
  
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

app.module.ts

import { NgModule } from '@angular/core';
import { HomeComponent } from './home.component'
import { ProductComponent } from './product.component'
import { AboutComponent } from './about.component'
import { ContactComponent } from './contact.component'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
  
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProductComponent,
    AboutComponent,
    ContactComponent
  ],
  imports: [
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里的路由器出口是路由功能，路由器使用它来标记模板，匹配的组件应该插入到哪里。

然后在app-routing.module.ts文件中，我们提供了这些路由并让 Angular 知道这些路由。

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component'
import { ProductComponent } from './product.component'
import { AboutComponent } from './about.component'
import { ContactComponent } from './contact.component'
  
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent, },
];
  
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

然后在@NgModule导入中的 app/module.ts 文件中简单地导入“AppRouting”模块。

app.module.ts

import { NgModule } from '@angular/core';
import { HomeComponent } from './home.component'
import { ProductComponent } from './product.component'
import { AboutComponent } from './about.component'
import { ContactComponent } from './contact.component'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
  
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProductComponent,
    AboutComponent,
    ContactComponent
  ],
  imports: [
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

因此，现在在 CLI 中使用“ng serve”运行它并在浏览器中打开localhost://4200 ，您会看到导航栏，您可以从一个组件导航到另一个组件，而无需重新加载页面。

输出：