知识盲区科普

Website VS. Webpage:

Website: A collection of web pages which are grouped together and usually connected together in various ways. Often called a "web site" or a "site."
Webpage: A document which can be displayed in a web browser such as Firefox, Google Chrome, Opera, Microsoft Internet Explorer or Edge, or Apple's Safari. These are also often called just "pages."

网站（Website）是网页（Webpage）的集合，网页往往指的就是.html文件。

前情提要

在Angular框架中，一个网页由许许多多的Component组合而成。

截屏2021-03-24 下午6.12.07.png 用我最喜欢的B站Up主主页做个例子，当前这个页面被叫做帮主的个人网站的主页(Mainpage)，主页由许多部分组成，分别是最上方的背景和个人信息，中间的导航板(Dashboard)，以及下面的内容区和一些小块的区域，这些部分共同组成了这个页面。

这时候如果我们点击TA的视频后的最多播放，我们会发现下面的视频内容动态的发生了变化，但是回去地址栏看一眼，发现网页地址并没有发生变化，这就是Javascript实现的网页与用户的动态交互。网页不再是静态的不可变化的，而是可以随着用户的操作发生某种程度上的变化。

但是这种改变是有限制的！ 因为网页的框架是在html文件里被写死了的，也就是说大的框架动不了，能动的只有内容，比如这边的最多播放和最新发布，再比如粉丝数播放量这些数字，都是可以动态变化的。

接着我们点击导航板中的投稿

截屏2021-03-24 下午6.23.06.png 可以明显看到，网页的布局出现了变化，但又没有全变！ 机智的小伙伴们这时候已经去点开了地址栏，发现网页地址变了！在主页的后面多了"/video"，也就是说这时候我们看到的已经是另一个网页了！！

而这个功能就是所谓的Routing。

正文

Routes

ng generate module app-routing --flat --module=app

在Angular里面创建RoutingModule很简单，在对应Web应用文件夹输入以上指令即可，后面的--flat 和--module=app是可选项。

然后软件就会对应生成app-routing.module.ts文件

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent }
];

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

（注：以上代码不是软件原生代码，是修改过的）

routes里面的{path:‘heroes’, component: “HeroesComponent”}，意味着当主页地址后面加上'heroes'之后，这个网站会动态生成一个叫做“HeroesComponent”的组件，而该组件里包含的就是新的网址下对应的要展现给用户的内容。

RouterOutlet

在安排好了当网址地址加了‘heroes’后缀后应该产生的内容后，我们还应该告诉我们的网页，这个新的内容应该怎么布局。依然是上面的例子，在点击了“投稿”之后，我们发现个人主页信息和导航条等内容是没有发生变化的，只有下面的内容区域发生了改变。也就是说，这个网页的html模版可能长这样：

<个人主页信息></个人主页信息>
<Dashboard></Dashboard>
<router-outlet></router-outlet>

router-outlet定义了网页在被route之后产生的新的组件的布局位置。

OK，到这边其实就可以结束了，现在只要我们在个人主页的地址后面加上"/video"，页面就会被导向“投稿”页面。但我们能期待用户都知道去给地址加后缀吗？互联网产品，永远要秉持用户是傻瓜的原则进行设计！（不是

routerLink

所以这时候就有了下面的代码：

<a routerLink="/heroes">Heroes</a>

在点击Heroes链接之后，页面就会被自动导向“/heroes”页面，对应的component被生成并加入到对应位置，至此就实现了navigation的功能！

拓展

重定向

很多时候用户都只知道网站地址，也就是没有后缀的地址，但有时候这个地址对应的并不是一个导航页面（虽然大部分情况下是的），而我们又希望用户在输入这个地址之后会打开对应的导航页面，这时候可以这样子：

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }

在routes里加入这个重定向地址就可以啦。

返回上一级

返回上一级的功能很简单，利用Location服务即可，执行location.back()即可返回历史记录中的上一级网页。

Angular学习日记——Navigation with routing