Angular7：路由

  路由允许用户在页面之间进行导航。或许你已经看到了许多网站，它们的链接可以引导你进入一个新的页面。这可以通过路由来实现。这里我们所指的页面将以组件的形式出现。我们已经看到了如何创建组件。现在让我们创建一个组件，看看如何使用路由。

  在项目设置过程中，我们已经包含了路由模块，该模块可在app.module.ts中找到，如下所示

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

  AppRoutingModule如上所示添加，并包含在imports数组中。

  应用程序路由模块的文件详细信息如下：

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';

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

  我们需要注意，在项目设置期间添加路由时，默认情况下会生成该文件。如果没有自动添加，上述文件必须手动添加。

  因此，在上面的文件中，我们从@angular/router导入了路由和RouterModule。

 定义了路由类型的常量路由。它是一个数组，包含我们项目中需要的所有路径。

  常量路由被提供给RouterModule，如@NgModule所示。要向用户显示路由详细信息，我们需要在希望显示视图的地方添加<router-outlet>指令。

  app.component.html也增加了同样的内容，如下所示

<h1>Angular 7 Routing Demo</h1> 
<router-outlet></router-outlet>

  现在，让我们创建两个称为Home和Contact Us的组件，并使用路由在它们之间导航。

Home组件

  首先我们将讨论Home。创建组件Home的语法如下：

ng g component home
C:\projectA7\angular7-app>ng g component home CREATE 
src/app/home/home.component.html (23 bytes) CREATE 
src/app/home/home.component.spec.ts (614 bytes) CREATE 
src/app/home/home.component.ts (261 bytes) CREATE 
src/app/home/home.component.css (0 bytes) UPDATE 
src/app/app.module.ts (692 bytes)

Contact Us组件

  创建组件Contact Us的语法如下： 

ng g component contactus
C:\projectA7\angular7-app>ng g component contactus 
CREATE src/app/contactus/contactus.component.html (28 bytes) 
CREATE src/app/contactus/contactus.component.spec.ts (649 bytes) 
CREATE src/app/contactus/contactus.component.ts (281 bytes) 
CREATE src/app/contactus/contactus.component.css (0 bytes) 
UPDATE src/app/app.module.ts (786 bytes)

  我们已经完成创建组件Home和Contact Us。以下是app.module.ts中组件的详细信息。

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      HomeComponent, 
      ContactusComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ],
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

  现在让我们在app-routing.module.ts中添加路由详细信息，如下所示。

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

const routes: Routes = [ 
   {path:"home", component:HomeComponent}, 
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({ 
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { }

  routes数组包含带有路径和组件的组件详细信息。所需组件如上所示导入。

  这里，我们需要注意的是，路由所需的组件是在app.module.ts中导入的，也是在app-routing.module.ts中导入的。让我们在一个地方，即在app-routing.module.ts中导入它们。

  因此，我们将创建一个用于路由的组件数组，并将该数组导出到app-routing.module.ts中，然后再次导入到app.module.ts中

  这就是我们如何在app-routing.module.ts做到的。

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

const routes: Routes = [
   {path:"home", component:HomeComponent},
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { } export const 
RoutingComponent = [HomeComponent,ContactusComponent];

  组件数组按如下方式导入app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt';

@NgModule({ 
   declarations: [ 
      SqrtPipe,
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

  现在我们已经完成了路由的定义，我们需要向用户显示的内容，让我们添加两个按钮，在app.component.html的Home和Contact Us，点击相应的按钮，它将显示我们在add.component.html添加的<router-outlet>指令中的组件视图。

  在app.component.html创建按钮，并给出创建路线的路径。

app.component.html

<h1>Angular 7 Routing Demo</h1> 
<nav> 
   <a routerLink = "/home">Home</a> 
   <a routerLink = "/contactus">Contact Us </a> 
</nav> 
<router-outlet></router-outlet>

  在.html中，我们添加了锚链接，主页和联系我们，并使用路由链接给出我们在应用路由中创建的路由路径

  现在让我们在浏览器中测试一下：

  这就是我们在浏览器中获取它的方式。让我们添加一些样式，使链接看起来很好。

  我们在app.component.css中添加了以下css

a:link, a:visited { 
   background-color: #848686; 
   color: white; 
   padding: 10px 25px; 
   text-align: center; 
   text-decoration: none; 
   display: inline-block; 
} 
a:hover, a:active {
   background-color: #BD9696;
}

  浏览器的显示效果如下：

  单击Home链接，查看Home的详情，如下所示。

  单击Contact Us链接，查看详情，如下所示。

  当您点击链接时，您还会看到地址栏中的页面url发生了变化。它在页面的末尾附加了路径细节，如上面显示的截图所示。