如何在Angular 8中启用组件页面之间的路由和导航？

任务是在用户单击链接时通过在角度组件之间进行路由来启用角组件之间的路由，它将被导航到与所需组件相对应的页面链接。

让我们知道Angular中的路由

Angular 8路由：

Angular 8路由器有助于在用户操作触发的页面之间导航。当用户单击链接或从浏览器地址栏中输入URL时，就会进行导航。该链接可以包含对将要定向用户的路由器的引用。我们还可以通过角度路由通过链接传递其他参数。

方法：

• 创建一个Angular应用。

  句法：

  ng new app_name
  
  

• 对于路由，您将需要一些组件，这里我们制作了两个组件(主页和破折号)来显示主页和仪表板。

  句法：

  ng g c component_name
  

• 在app.module.ts中，从@ angular / router导入RouterModule。

  句法：

  import { RouterModule } from '@angular/router';
  

• 然后在app.module.ts的导入中定义路径。

  imports: [
      BrowserModule,
      AppRoutingModule,
      RouterModule.forRoot([
        { path: 'home', component: HomeComponent },
        { path: 'dash', component:DashComponent } 
      ])
    ],
  

• 现在，对于HTML部分，为app.component.html定义HTML。在链接中，将routerLink的路径定义为组件名称。

  Home 
  
  dashboard
  
  

• 在app.component.html中为您的应用程序应用路由器出口。路由视图在< router-outlet >中呈现

• 现在，只需为home.component.html和dash.component.html文件定义HTML即可。
• 您的角度式网络应用已准备就绪。

代码实现：

• app.module.ts：

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { RouterModule } from '@angular/router';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { HomeComponent } from './home/home.component';
  import { DashComponent } from './dash/dash.component';
    
  @NgModule({
    declarations: [
      AppComponent,
      HomeComponent,
      DashComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      RouterModule.forRoot([
        { path: 'home', component: HomeComponent },
        { path: 'dash', component:DashComponent } 
      ])
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• app.component.html

  Home 
  
  dashboard
  
  

• home.component.html

  GeeksforGeeks
  

• dash.component.html

  Hey GEEKS! Welcome to Dashboard
  

输出：

运行开发服务器，然后单击链接：