Angular 9/10中的路由

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

步骤:

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

语法:

HTML:

<li><a routerLink="/about" >About Us</a></li>
<router-outlet></router-outlet>

 { path: 'about', component: AboutComponent }

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

ng new learn-routing

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

<span>
    <ul>
        <li><a routerLink="/" >Home</a></li>
        <li><a routerLink="/products" >Products</a></li>
        <li><a routerLink="/about" >About Us</a></li>
        <li><a routerLink="/contact" >Contact Us</a></li>
    </ul>
</span>
<router-outlet></router-outlet>

在这里，路由器出口是路由功能，被路由器用来标记其中的模板，一个匹配的组件应该被插入。

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

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文件中的@NgModule导入“AppRouting”模块。

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，在这里你可以看到你的导航栏，你可以从一个组件导航到另一个，而不需要重新载入页面。

输出:

Angular 9/10中的路由