Angular7 - 路由(Routing)

Angular7 - 路由(Routing) 首页 / Angular7入门教程 / Angular7 - 路由(Routing)

路由(Routing)基本上意味着在页面之间导航,现在让我们创建一个组件,看看如何在其上使用路由。如下所示-

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数组中。

app-routing.module 的文件详细信息在下面给出-

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导入了Routes和RouterModule。

定义了一个常量 routes ,其类型为Routes,它是一个数组,其中包含我们项目中所需的所有路由。

如@NgModule所示,将const路由提供给RouterModule, 为了向用户显示路由详细信息,我们需要在要显示视图的位置添加<router-outlet>指令。

如下所示,在app.component.html中添加了相同的内容-

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

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

Component Home

以下是Component 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)

Component Contact Us

以下是Component Contactus的语法-

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)

我们已经完成了在components 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-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];

将RoutingComponent如下导入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”,然后单击相应的按钮,它将在<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中,我们添加了 anchor 链接,"Home"和"Contact us",并使用routerLink给出了我们在app-routing.module.ts中创建的路由的路径。

现在让我们在浏览器中进行相同的测试-

Routing Demo

我们在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;
}

这是浏览器中链接的显示-

Display Links

单击Home链接,以查看主页的组件详细信息,如下所示-

Home Link

单击Contact Us,以查看其组件详细信息,如下所示-

Contact Us

当您单击链接时,您还将看到地址栏中的页面URL发生变化。如上图所示,它将路径详细信息附加在页面的末尾。

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

Python核心技术与实战 -〔景霄〕

零基础学Java -〔臧萌〕

RPC实战与核心原理 -〔何小锋〕

架构实战案例解析 -〔王庆友〕

Selenium自动化测试实战 -〔郭宏志〕

爱上跑步 -〔钱亮〕

陈天 · Rust 编程第一课 -〔陈天〕

网络排查案例课 -〔杨胜辉〕

超级访谈:对话毕玄 -〔毕玄〕

好记忆不如烂笔头。留下您的足迹吧 :)