在开发的过程中，避免不了多个项目使用的JDK环境不一致。如何在本机安装多个JDK环境，并能做到随时进行切换呢？

注意: 此文不适用于最新版本的brew

安装JDK

安装的过程中，我们使用brew，其官方地址如下：https://brew.sh/。第一次安装后，版本是最新的，但在以后的使用中，可能brew的版本就过期了。我们要保证在使用时其版本是最新的，所以每次使用前先执行以下命令以完成升级操作。

brew update

正式的使用brew前我们先简单了解一下它。brew能为我们简化在macos或liunx中的软件安装过程，相当于macos系统下的包管理器。我们知道在MACOS系统的软件大体为两种：一种是命令行式的命令比如curl，我们使用brew install curl来安装。你们敲击一个命令会完成一些操作，它只能在sheel中使用；另一种则是应用程序，相对来讲比较大，比如XAMPP，我们则使用brew cask install XAMPP来安装；

在brew中，对这两种软件进行了分类，小的叫做formulae，大的叫做cask。我们可以在官网中找到其身影。

地址为：https://formulae.brew.sh/

查找JAVA

执行brew search java，我们发现其对应以下列表。

panjiedeMacBook-Pro:~ panjie$ brew search java   
==> Formulae
app-engine-java            javarepl                   libreadline-java
google-java-format         jslint4java

==> Casks
eclipse-java                             netbeans-java-se
eclipse-javascript                       oracle-jdk-javadoc
java                                     yourkit-java-profiler
netbeans-java-ee                         homebrew/cask-versions/java-beta

在此，我们想更多的了解Casks中的java, 则执行brew cask info java

panjiedeMacBook-Pro:~ panjie$ brew cask info java
java: 12.0.2,10:e482c34c86bd4bf8b56c0b35558996b9
https://openjdk.java.net/
Not installed
From: https://github.com/Homebrew/homebrew-cask/blob/master/Casks/java.rb
==> Name
OpenJDK Java Development Kit
==> Artifacts
jdk-12.0.2.jdk -> /Library/Java/JavaVirtualMachines/openjdk-12.0.2.jdk (Generic Artifact)

我们通过以上信息得到：该cask对应的是openjdk-12.0.0，如果我们计划安装它的话，则使用brew cask install java来进行安装。

查找JDK关键字

除了直接查找java关键字外，我们还可以查找jdk关键字 -> brew search jdk

panjiedeMacBook-Pro:~ panjie$ brew search jdk
==> Casks
adoptopenjdk ✔                           adoptopenjdk12-openj9-jre-large
adoptopenjdk10                           adoptopenjdk12-openj9-large
adoptopenjdk11                           adoptopenjdk8 ✔
adoptopenjdk11-jre                       adoptopenjdk8-jre
adoptopenjdk11-openj9                    adoptopenjdk8-openj9
adoptopenjdk11-openj9-jre                adoptopenjdk8-openj9-jre
adoptopenjdk11-openj9-jre-large          adoptopenjdk8-openj9-jre-large
adoptopenjdk11-openj9-large              adoptopenjdk8-openj9-large
adoptopenjdk12                           adoptopenjdk9
adoptopenjdk12-jre                       oracle-jdk
adoptopenjdk12-openj9                    oracle-jdk-javadoc
adoptopenjdk12-openj9-jre                sapmachine-jdk

如果你获取的列表中没有adoptopenjdk10等，请执行brew cask info adoptopenjdk再按提示执行brew tap adoptopenjdk/openjdk。我猜测原因是这样：brew只收录了adoptopenjdk最后的版本，一些过期的版本，交由adoptopenjdk自己管理。而brew tap adoptopenjdk/openjdk，则是拉取adoptopenjdk自管理包的信息。

安装

在此，我们安装两个版本adoptopenjdk12及adoptopenjdk8

brew cask install adoptopenjdk
brew cask install adoptopenjdk8

查看安装版本

不同版本的JDK安装好了，如何能做到自由切换呢？首先，我们使用 /usr/libexec/java_home -V来查看版本安装信息

panjiedeMacBook-Pro:~ panjie$ /usr/libexec/java_home -V
Matching Java Virtual Machines (4):
    12.0.2, x86_64:    "OpenJDK 12.0.2"    /Library/Java/JavaVirtualMachines/adoptopenjdk-12.0.2.jdk/Contents/Home
    1.8.0_222, x86_64:    "AdoptOpenJDK 8"    /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home
    1.8.0_152, x86_64:    "Java SE 8"    /Library/Java/JavaVirtualMachines/jdk1.8.0_152.jdk/Contents/Home
    1.8.0_151, x86_64:    "Java SE 8"    /Library/Java/JavaVirtualMachines/jdk1.8.0_151.jdk/Contents/Home

/Library/Java/JavaVirtualMachines/adoptopenjdk-12.0.2.jdk/Contents/Home

得到4条记录，其有两条是刚刚安装的，其它两条是以前安装的oracle官方的JDK。其实JDK切换，本质上切换的JAVA_HOME这个系统变量。也就是说：JAVA_HOME当哪个目录，在执行java时就会到哪个目录去找相当的文件，也就起到了切换jdk版本的目的。在切换前，我们先输出下当前的JAVA_HOME来查看一下:

panjiedeMacBook-Pro:~ panjie$ echo $JAVA_HOME
/Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home

liunx系统中，使用echo $JAVA_HOME$

此时，我们执行java -version来核查一下当前的版本号，的确与JAVA_HOME设置的相对应：

panjiedeMacBook-Pro:~ panjie$ java -version
openjdk version "1.8.0_222"
OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_222-b10)
OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.222-b10, mixed mode)

自由切换版本

有了前面的基础自由切换版本就容易了。因为自由切版本，其实就是重新设置环境变量JAVA_HOME的值：macos中当用户的环境变量的位置为:~/.bash_profile，我们编辑该文件并加入以下信息:

# https://segmentfault.com/a/1190000020177762
alias jdk12="export JAVA_HOME=/Library/Java/JavaVirtualMachines/adoptopenjdk-12.0.2.jdk/Contents/Home"
alias jdk8="export JAVA_HOME=/Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home"

# 默认JDK
jdk8

保存退出后，我们重新启动一个shell，分别执行jdk8,jdk12:

panjiedeMacBook-Pro:~ panjie$ jdk8
panjiedeMacBook-Pro:~ panjie$ java -version
openjdk version "1.8.0_222"
OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_222-b10)
OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.222-b10, mixed mode)
panjiedeMacBook-Pro:~ panjie$ jdk12
panjiedeMacBook-Pro:~ panjie$ java -version
openjdk version "12.0.2" 2019-07-16
OpenJDK Runtime Environment AdoptOpenJDK (build 12.0.2+10)
OpenJDK 64-Bit Server VM AdoptOpenJDK (build 12.0.2+10, mixed mode, sharing)

版本切换成功。

除此以外，我们还可以用更加简单的方法来设置此文件（因为安装路径实在是太长了）。首先我们来到查看安装版本，发现安装的版本有12.0.2,1.8.0_222,1.8.0_152,1.8.0_151，则可以通过这样的命令来获取其安装路径:

panjiedeMacBook-Pro:~ panjie$  /usr/libexec/java_home -v 1.8.0_222
/Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home

则~/.bash_profile可以修改为:

# https://segmentfault.com/a/1190000020177762
alias jdk12="export JAVA_HOME=/Library/Java/JavaVirtualMachines/adoptopenjdk-12.0.2.jdk/Contents/Home"

# 使用命令`/usr/libexec/java_home -v 1.8.0_222`来替换原路径，也相当于输出了原路径.
alias jdk8="export JAVA_HOME=`/usr/libexec/java_home -v 1.8.0_222`"
jdk8

在IDEA中设置项目JDK

我们刚刚只是设置了当前用户的JDK环境。也就是说，如果我们另外建立一个用户则可能不管用了（系统会给这个用户使用其默认的JDK）。由于我们的IDEA是可能对每个项目单元设置JDK的，所以即使我们设置了当前用户的JDK环境，由于未改变项目的JKD环境，其原来的环境仍然会生效。点击IDEA上方的file->projetc structure，来到：

然后new一个。此时要选择Java home的路径，如果你不小心忘记了，打开shell并输入/usr/libexec/java_home -V来查看即可。设置完成后，该项目便会工作在新的jdk环境下而与系统的JDK环境无关了。当使用idea打开不同的项目时，idea会为我们应用不同版本的jdk，我们也不需要再切环境了。

参考

brew
stackoverflow
www.baeldung.com

TypeScript 为 JavaScript 带来静态类型检查，让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误。

Vue 很早就支持 TypeScript，但配置起来比较麻烦，幸好有了 Vue CLI 3.0。安装好 vue-cli 之后，使用 vue create 项目名称 来创建项目，vue 脚本手架自动创建以项目名称命名的目录。

vue-cli 3 生成的项目结构比较科学，尤其是通过 components 和 views 将作为控件的组件和作为页面的组件分离开来，结构更清晰。可以理解为 views 中定义的组件是要配置在路由中的，而 componets 中定义的组件是被其它组件调用的。

HTML 需要定义一个 <div> 作为 Vue 应用的容器，main.ts 中会通过 new Vue(...) 生成应用实例并将之与容器绑定。注意 HTML 中定义的 <div id="app"></div> 会被 App.vue 模板中定义的 <div id="app">...</div> 替换掉。

Vue 是一个组件化的框架，组件是 Vue 的基本元素。一个 Vue 应用是由若干组件构成的，组件与组件之间的嵌套或并列关系，最终可以用树形来表示。main.ts 中创建的 Vue 实例是最顶层组件。

每个 Vue 组件都有三个组成部分，即骨架（HTML）、样式（CSS/LESS/SCSS）和脚本（JavaScript/TypeScript）。可以在一个 .vue 文件中写完三个部分，也可以将样式和脚本部分分别写成独立的文件。笔者推荐独立文件的方式。

既然我们选用 TypeScript，使用上图所示的 class-style 来实现 Vue 组件更为适合。

除了 class-style 之外，也可以使用 config-style。配置风格是最早支持的风格，将 Vue 的各类成员（属性、数据、计算属性、方法等）独立定义，易于理解 Vue 实例的内部结构，但初学者容易搞不清楚 this 指向。

Vue 定义的组件需要注册才能在其它组件中使用。注册的方式分为全局和局部两种。使用 TypeScript 和类风格开发 Vue 应用时，推荐使用局部注册。局部注册比较符合模式化开发思想。

Vue 可以通过 {{ }} 语法在文本中插值。但是如果要将值插入属性，则应使用 : 号修饰属性名。组件属性（指 HTML 标签参数）可随意定义，加 @Prop() 修饰即可，如果属性是必须的，应该使用 : 来定义；可选属性则使用 !: 来定义。

在 HTML 或自定义组件标签中使用 @ 前缀的事件名，可以绑定事件处理函数。Vue 实现了部分 HTML 事件，比如 @click 可以直接绑定。组件也可以“定义”自己的事件，不需要提前声明，只需要 this.$emit() 直接触发即可。

Vue 本身是数据驱动渲染，所以数据（包括属性、计算属性等）变化可以触发界面数据呈现，但是界面的输入要反馈给组件，就需要用触发事件的方式来反馈。双向绑定是用于更新属性事件的语法糖，使用 :属性名.sync="..." 绑定。子组件中通过触发 update:属性名 事件来更新父组件中绑定的数据。

路由主要用于组织视图（页面）关系。最基本的要求是为路由配置每个路径对应的组件。name 可以当作路径的简短别名。路由操作一般会使用注入到 Vue 实例中的 $router 对象，常用 $router.push() 和 $router.replace() 来跳转，二者的区别在于对 URL 历史的影响（可以想像）

路由项配置中的 component 可以指定为导入的的组件类，也可以指定一个异步（返回 Promise 的）函数，该函数动态加载组件并返回包含该组件类的 Promise 对象。上例中使用的 import() 动态引入语法。

做一个简单的登录界面加深对前面知识的理解和记忆。该示例特意避免了 Ajax 调用，以降低其复杂程度。

没有 Ajax 实现的远程认证，我们只能假设用户输入 pass 时为正确密码。用户名可任意输入，如果验证成功则会显示该用户已登录。

项目仍然是由 vue-cli 3 创建的。创建好之后去掉了 About 和 HelloWorld，加入了 Login，并将 Home 改造成三部分各自独立的文件结构。当然，顺便还按自己（或团队）的开发规范调整了下 tslint.json 中的配置。

App.vue、main.ts 和 router.ts 可以算得上是一个 Vue 应用的入口和基本配置。App.vue 中直接把控制权交给了 vue-router。注意，import 的时候不能省略 .vue 扩展名。

Login 组件中用到了双向绑定，由于属性（由 @Prop() 修饰）不可以在内部修改，甚至可以把它声明为 readonly（也许 Vue 3 会定义相关的规范）。注意到 keypress 事件有一个后缀，这在 Vue 中称为事件修饰符，可以用于快速处理一些特殊情况，比如 keypress.enter 表示 Enter 按下时。

在 Home 中使用 Login 组件时，Home 的 user 数据字段绑定到了 Login 的 user 属性上，.sync 修饰符表示这是一个双向绑定。前面 Login 的代码中，如果登录成功，Login 会通过 $emit("update:user", {...}) 来通知绑定数据发生变化，Vue 框架接收到这个通知并更新了绑定的 Home.user，这会导致计算属性 message 重算，并最终触发呈现“某用户已登录”。

原码下载：百度网盘

Vue 入门很简单吧！

不过 Vue 本身含有非常丰富的功能，要用 Vue 搭建完整的应用，仍然需要了解大量 Vue 设计概念和操作技巧。建议读者们仔细阅读 Vue 官方提供教程和 API 手册，并保持在 Vue 相关技术社区的活跃度。

前后端分离并不是什么新鲜事，到处都是前后端分离的实践。然而一些历史项目在从一体化 Web 设计转向前后端分离的架构时，仍然不可避免的会遇到各种各样的问题。由于层出不穷的问题，甚至会有团队质疑，一体化好好的，为什么要前后端分离？

说到底，并不是前后分离不好，只是可能不适合，或者说……设计思维还没有转变过来……

一体式 Web 架构示意

前后分离式 Web 架构示意

为什么要前后端分离

比为什么要前后端分离更现实的问题是什么时候需要前后端分离，即前后端分离的应用场景。

说起这个问题，我想到了 2011 年左右，公司在以 .NET 开发团队为主的基础上扩展了 Java 团队，两个团队虽然是在做不同的产品，但是仍然存在大量重复性的开发，比如用 ASP.NET WebPage 写了组织机构相关的页面，用 JSP 又要再写一遍。在这种情况下，团队就开始思考这样一个方案：如果前端实现与后端技术无关，那页面呈现的部分就可以共用，不同的后端技术只需要实现后端业务逻辑就好。

方案根本要解决的问题是把数据和页面剥离开来。应对这种需求的技术是现成的，前端采用静态网页相关的技术，HTML + CSS + JavaScript，通过 AJAX 技术调用后端提供的业务接口。前后端协商好接口方式通过 HTTP 提供，统一使用 POST 谓词。接口数据结构使用 XML 实现，前端 jQuery 解析 XML 很方便，后端对 XML 的处理工具就更多了……后来由于后端 JSON库（比如 Newtonsoft JSON.NET、jackson、Gson 等）崛起，前端处理 JSON 也更容易（JSON.parse() 和 JSON.stringify()），就将数据结构换成了 JSON 实现。

这种架构从本质上来说就是 SOA（面向服务的架构）。当后端不提供页面，只是纯粹的通过 Web API 来提供数据和业务交互能力之后，Web 前端就成了纯粹的客户端角色，与 WinForm、移动终端应用属于同样的角色，可以把它们合在一起，统称为前端。以前的一体化架构需要定制页面来实现 Web 应用，同时又定义一套 WebService/WSDL 来对 WinForm 和移动终端提供服务。转换为新的架构之后，可以统一使用 Web API 形式为所有类型的前端提供服务。至于某些类型的前端对这个 Web API 进行的 RPC 封装，那又是另外一回事了。

通过这样的架构改造，前后端实际就已经分离开了。抛开其它类型的前端不提，这里只讨论 Web 前端和后端。由于分离，Web 前端在开发的时候压根不需要了解后端是用的什么技术，只需要后端提供了什么样的接口可以用来做什么事情就好，什么 C#/ASP.NET、Java/JEE、数据库……这些技术可以统统不去了解。而后端的 .NET 团队和 Java 团队也脱离了逻辑无关的美学思维，不需要面对美工精细的界面设计约束，也不需要在思考逻辑实现的同时还要去考虑页面上怎么布局的问题，只需要处理自己擅长的逻辑和数据就好。

前后端分离之后，两端的开发人员都轻松不少，由于技术和业务都更专注，开发效率也提高了。分离带来的好处渐渐体现出来：

1. 前后职责分离

前端倾向于呈现，着重处理用户体验相关的问题；后端则倾处于业务逻辑、数据处理和持久化等。在设计清晰的情况下，后端只需要以数据为中心对业务处理算法负责，并按约定为前端提供 API 接口；而前端使用这些接口对用户体验负责。

2. 前后技术分离

前端可以不用了解后端技术，也不关心后端具体用什么技术来实现，只需要会 HTML/CSS/JavaScript 就能入手；而后端只需要关心后端开发技术，除了省去学习前端技术的麻烦，连 Web 框架的学习研究都只需要关注 Web API 就好，而不用去关注基于页面视图的 MVC 技术（并不是说不需要 MVC，Web API 的接口部分的数据结构呈现也是 View），不用考虑特别复杂的数据组织和呈现。

3. 前后分离带来了用户用户体验和业务处理解耦

前端可以根据用户不同时期的体验需求迅速改版，后端对此毫无压力。同理，后端进行的业务逻辑升级，数据持久方案变更，只要不影响到接口，前端可以毫不知情。当然如果需求变更引起接口变化的时候，前后端又需要坐在一起同步信息了。

4. 前后分离，可以分别归约两端的设计

后端只提供 API 服务，不考虑页面呈现的问题。实现 SOA 架构的 API 可以服务于各种前端，而不仅仅是 Web 前端，可以做到一套服务，各端使用；同时对于前端来说，不依赖后端技术的前端部分可以独立部署，也可以应于 Hybrid 架构，嵌入各种“壳”（比如 Electron、Codorva 等），迅速实现多终端。

前后分离架构

任何技术方案都不是银弹，前后分离不仅带来好处，也带来矛盾。我们在实践初期，由于前端团队力量相对薄弱，同时按照惯例，所有业务处理几乎都是由后端（原来的技术骨干）来设计和定义的，前端处理过程中常常发现接口定义不符合用户操作流程，AJAX 异步请求过多等问题。毕竟后端思维和前端思维还是有所不同——前端思维倾向于用户体验，而后端思维则更倾向于业务的技术实现。

除此之外，前后分离在安全性上的要求也略有不同。由于前后分离本质上是一种 SOA 架构，所以在授权上也需要按 SOA 架构的方式来思考。Cookie/Session 的方式虽然可用，但并不是特别合适，相对来说，基于 Token 的认证则更适合一些。采用基于 Token 的认证就意味着后端的认证部分需要重写……后端当然不想重写，于是会将皮球踢给前端来让前端想办法实现基于 Cookie/Session 的认证……于是前端开始报怨（悲剧）……

谁来主导

这些矛盾的出现，归根结底在于设计不够清晰明确。毫无疑问，在开发过程中，主导者应该是架构师或者设计师。然而实际场景中，架构师或者设计师往往也是开发人员，所以他们的主要技术栈会极大的影响前后端在整个项目中的主次作用。这位骨干处于哪端，开发的便捷性就会向哪端倾斜。这是一个不好的现象，但是我们不得不面对这样的现状，我相信很多不太大的团队也面临着类似的问题。

如果没有良好的流程规范，通常前端接触的到角色会比后端更多（多数应用型项目/产品，并非所有情况）。

• 前端开发人员会受到项目/产品经理或客户的直接影响：这个地方应该放个按钮，那个操作应该这么进行……；
• 前端还要与美工对接——这样的设计不好实现，是否可以改成那样？客户要求必须这么操作，但是这个设计做不到；
• 前端还要跟后端对接，对于某些应用，甚至是多个后端

换句话说，前端可以成为项目沟通的中心，所以比后端更合适承担主导的角色。

接口设计

接口分后端服务实现和前端调用两个部分，技术都是成熟技术，并不难，接口设计才是难点。前面提到前后端会产生一些矛盾。从前端的角度来看，重点关注的是用户体验，包括用户在进行业务操作时的流动方向和相关处理；而从后端的角度来看，重点关注的是数据完整、有效、安全。矛盾在于双方关注点不同，信息不对称，还各有私心。解决这些矛盾的着眼点就是接口设计。

接口设计时，其粒度的大小往往代表了前后端工作量的大小（非绝对，这和整体架构有关）。接口粒度太小，前端要处理的事情就多，尤其是对各种异步处理就可能会感到应接不暇；粒度太大，就会出现高耦合，降低灵活性和扩展性，当然这种情况下后端的工作就轻松不了。业务层面的东西涉及到具体的产品，这里不多做讨论。这里主要讨论一点点技术层面的东西。

就形式上来说，Web API 可以定义成 REST，也可以是 RPC，只要前后端商议确定下来就行。更重要的是在输入参数和输出结果上，最好一开始就有相对固定的定义，这往往取决于前端架构或采用的 UI 框架。

常见请求参数的数据形式有如下一些：

• 键值对，用于 URL 中的 QueryString 或者 POST 等方法的 Payload
• XML/JSON/...，通常用于 POST 等方法的 Payload，也可以使用 multipart 传递
• ROUTE，由后端路由解析 URL 取得，在 RESTful 中常用

而服务器响应的数据形式就五花八门各式各样了，通常一个完整的响应至少需要包含状态码、消息、数据三个部分的内容，其中

• 状态码，HTTP 状态码或响应数据中特定的状态属性
• 消息，通常是放在响应内容中，作为数据的一部分
• 数据，根据接口协议，可能是各种格式，当前最流行的是 JSON

我们在实践中使用 JSON 形式，最初定义了这样一种形式

{
    "code": "number",
    "message": "string",
    "data": "any"
}

code 主要用于指导前端进行一些特殊的操作，比如 0 表示 API 调用成功，非0 表示调用失败，其中 1 表示需要登录、2 表示未获取授权……对于这个定义，前端拿到响应之后，就可以在应用框架层进行一些常规处理，比如当 code 为 1 的时候，弹出登录窗口请用户在当前页面登录，而当 code 为 2 的时候，则弹出消息提示并后附链接引导用户获取授权。

参阅：前后分离模型之封装 Api 调用

一开始这样做并没有什么问题，直到前端框架换用了 jQuery EasyUI。以 EasyUI 为例的好多 UI 库都支持为组件配置数据 URL，它会自动通过 AJAX 来获取数据，但对数据结构有要求。如果仍然采用之前设计的响应结构，就需要为组件定义数据过滤器（filter）来处理响应结果，这样做写 filter 以及为组件声明 filter 的工作量也是不小的。为了减少这部分工作量我们决定改一改接口。

新的接口是一种可变结构，正常情况下返回 UI 需要的数据结构，出错的情况则响应一个类型于原定结构的数据结构：

{
    "error": {
        "identity": "special identity string",
        "code": "number",
        "message": "string",
        "data": "any"
    }
}

对于新响应数据结构，前端框架只需要判断一下是否存在 error 属性，如果存在，检查其 identity 属性是否为指定的特殊值（比如某个特定的 GUID），然后再使用其 code 和 message 属性处理错误。这个错误判断过程略为复杂一些，但可以由前端应用框架统一处理。

如果使用 RESTful 风格的接口，部分状态码可以用 HTTP 状态码代替，比如 401 表示需要登录，403 就可以表示没有获得授权，500 表示程序处理过程中发生错误。当然，虽然 HTTP 状态码与 RESTful 风格更配，但是非 RESTful 风格也可以使用 HTTP 状态码来代替 error.code。

用户认证

认证方案很多，比如 Cookie/Session 在某些环境下仍然可行、也可以使用基于 Token 和 OAuth 或者 JWT，甚至是自己实现基于 Token 的认证方式。

基于 Cookie/Session 的认证方案

采用传统的 Cookie/Session 认证方案并非不可行，只不过有一些限制。如果前端部分和后端部分同源，比如页面发布在 http://domain.name/，而 Web API 发布在 http://domain.name/api/，这种情况下，原来的一体式 Web 方案所采用的 Cookie/Session 方案可以直接迁移过来，毫无压力。但是如果前面发布和 API 发布不同源，这种方法处理起来就复杂了。

然后一般前后端分离的开发方式，不管是开发阶段还是发布阶段，不同源的可能性占绝大比例，所以认证方案通常会使用与 Cookie 无关的方案。

基于 OAuth 的认证方案

目前各大网站的开放式接口都是 SOA 架构，如果把这些开放式接口看作提供服务方（服务端），而把使用这些开放式接口的应用看作客户端，那么就可以产生这样一种和前后分离对应的关系：

前端 ⇌ 客户端
     ⇣
   基于 OAuth 的认证）
     ⇡ 
后端 ⇌ 服务端

所以，开放式接口广泛使用的 OAuth 方案用于前后分离是可行的，但在具体实施上却并不是那么容易。尤其是在安全性上，由于前端是完全暴露在外的，与 OAuth 通常实施的环境（后端⇌服务端）相比，要注意的是首次认证不是使用已注册的 AppID 和 AppToken，而是使用用户名和密码。

基于 Token/JWT 的认证方案

虽然这个方案放在最后，但这个方案却是目前前后端分离最适合的方案。基于 Token 的认证方案，各种讨论由来已久，而 JWT 是相对较为成熟，也得到多数人认可的一种。从 jwt.io 上可以找到各种技术栈的 JWT 实现，应用起来也比较方便。

话虽如此，JWT 方案和以前使用的 Cookie/Session 在处理上还是有较大的差别，需要一定的学习成本。有人担心 JWT 的数据量太大。这确实是一个问题，但是硬件并不贵，4G 也开始进入不限流量阶段，一般应用中不用太在意这个问题。

前后分离的测试

前后分离之后，前端的测试将以用户体验测试和集成测试为主，而后端则主要是进行单元测试和 Web API 接口测试。与一体化的 Web 应用相比，多了一层接口测试，这一层测试可以完全自动化，一旦完成测试开发，就能在很大程度上控制住业务处理和数据错误。这样一来，集成测试的工作量会相对单一也容易得多。

前端测试的工作相对来说减轻不了多少，前后分离之后的前端部分承担了原来的集成测试工作。但是在假设 Web API 正确的情况下进行集成测试，工作量是可以减轻不少的，用例可以只关注前端体验性的问题，比如呈现是否正确，跳转是否正确，用户的操作步骤是否符合要求以及提示信息是否准确等等。

对于用户输入有效性验证这部分工作在项目时间紧迫的情况下甚至都可以完全抛给 Web API 去处理。不管是否前后端分离，Web 开发中都有一个共识：永远不要相信前端！既然后端必须保证数据的安全性和有效性，那么前端省略这一步骤并不会对后端造成什么实质性的威胁，最多只是用户体验差一点。但是，如果前后端都要做数据有效性验证，那一定要严格按照文档来进行，不然很容易出现前后端数据验证不一致的情况（这不是前后分离的问题，一体化架构同样存在这个问题）。

小结

总的来说，前后分离所带来的好处还是很明显的。但是具体实施的时候需要一个全新的思考方式，而不是基于原有一体化 Web 开发方式来进行思考。前后分离的开放方式将开发人员从复杂的技术组合中解放出来，大家都可以更专注于自己擅长的领域来进行开发，但同时也对前后端团队的沟通交流提出了更高的要求，前后端团队必须要一同设计出相对稳定的 Web API 接口（这部分工作其实不管是否前后端分离都是少不了的，只是前后分离的架构对此要求更高，更明确地要求接口不只存在于人的记忆中，更要文档化、持久化）。

什么是跨域？

概念：只要协议、域名、端口有任何一个不同，都被当作是不同的域。

URL                      说明       是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js     同一域名下   允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js     同一域名，不同端口  不允许
http://www.a.com/a.js
https://www.a.com/b.js 同一域名，不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js 主域相同，子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js 不同域名 不允许

对于端口和协议的不同，只能通过后台来解决。

跨域资源共享（CORS）

CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/trigkit4",true);
    xhr.send();
</script>

以上的trigkit4是相对路径，如果我们要使用CORS，相关Ajax代码可能如下所示：

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true);
    xhr.send();
</script>

代码与之前的区别就在于相对路径换成了其他域的绝对路径，也就是你要跨域访问的接口地址。

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

要解决跨域的问题，我们可以使用以下几种方法：

通过jsonp跨域

现在问题来了？什么是jsonp？维基百科的定义是：JSONP（JSON with Padding）是资料格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。

JSONP也叫填充式JSON，是应用JSON的一种新方法，只不过是被包含在函数调用中的JSON，例如：

callback({"name","trigkit4"});

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。 例如：

<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>
<script data-original="http://example.com/data.php?callback=dosomething"></script>

js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。

<?php
$callback = $_GET['callback'];//得到回调函数名
$data = array('a','b','c');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出
?>

最终，输出结果为：dosomething(['a','b','c']);

如果你的页面使用jquery，那么通过它封装的方法就能很方便的来进行jsonp操作了。

<script type="text/javascript">
    $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){
        //处理获得的json数据
    });
</script>

jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。

JSONP的优缺点

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

CORS和JSONP对比

CORS与JSONP相比，无疑更为先进、方便和可靠。

    1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

    2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

    3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS）。

通过修改document.domain来跨子域

浏览器都有一个同源策略，其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。 它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。
不同的框架之间是可以获取window对象的，但却无法获取相应的属性和方法。比如，有一个页面，它的地址是http://www.example.com/a.html ， 在这个页面里面有一个iframe，它的src是http://example.com/b.html, 很显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的：

<script type="text/javascript">
    function test(){
        var iframe = document.getElementById('ifame');
        var win = document.contentWindow;//可以获取到iframe里的window对象，但该window对象的属性和方法几乎是不可用的
        var doc = win.document;//这里获取不到iframe里的document对象
        var name = win.name;//这里同样获取不到window对象的name属性
    }
</script>
<iframe id = "iframe" data-original="http://example.com/b.html" onload = "test()"></iframe>

这个时候，document.domain就可以派上用场了，我们只要把http://www.example.com/a.html 和 http://example.com/b.html这两个页面的document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。

1.在页面 http://www.example.com/a.html 中设置document.domain:

<iframe id = "iframe" data-original="http://example.com/b.html" onload = "test()"></iframe>
<script type="text/javascript">
    document.domain = 'example.com';//设置成主域
    function test(){
        alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 对象
    }
</script>

2.在页面 http://example.com/b.html 中也设置document.domain:

<script type="text/javascript">
    document.domain = 'example.com';//在iframe载入这个页面也设置document.domain，使之与主页面的document.domain相同
</script>

修改document.domain的方法只适用于不同子域的框架间的交互。

使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的

使用HTML5的window.postMessage方法跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

建了个群有兴趣的朋友可以加一下 QQ 群：Angular 修仙之路(1)群 - 153742079 (已满)，请加 Angular 修仙之路(2)群 - 648681235。

路由是 Angular 应用程序的核心，它加载与所请求路由相关联的组件，以及获取特定路由的相关数据。这允许我们通过控制不同的路由，获取不同的数据，从而渲染不同的页面。

接下来我们将按照以下目录的内容，介绍 Angular 的路由。具体目录如下：

目录

• Installing the router

  • Base href

• Using the router

  • RouterModule.forRoot
  • RouterModule.forChild
• Configuring a route
• Displaying routes

• Futher configuration

  • Dynamic routes
  • Child routes
  • Component-less routes
  • loadChildren

• Router directives

  • routerLink
  • routerLinkActive
• Router API

Installing the router

首先第一件事，我们需要安装 Angular Router。你可以通过运行以下任一操作来执行此操作：

yarn add @angular/router
# OR
npm i --save @angular/router

以上命令执行后，将会自动下载 @angular/router 模块到 node_modules 文件夹中。

Base href

我们需要做的最后一件事，是将 <base> 标签添加到我们的 index.html 文件中。路由需要根据这个来确定应用程序的根目录。例如，当我们转到 http://example.com/page1 时，如果我们没有定义应用程序的基础路径，路由将无法知道我们的应用的托管地址是 http://example.com 还是 http://example.com/page1 。

这件事操作起来很简单，只需打开项目中的 index.html 文件，添加相应的 <base> 标签，具体如下：

<!doctype html>
<html>
  <head>
    <base href="/">
    <title>Application</title>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

以上配置信息告诉 Angular 路由，应用程序的根目录是 / 。

Using the router

要使用路由，我们需要在 AppModule 模块中，导入 RouterModule 。具体如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule
  ],
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ]
})
export class AppModule {}

此时我们的路由还不能正常工作，因为我们还未配置应用程序路由的相关信息。RouterModule 对象为我们提供了两个静态的方法：forRoot() 和 forChild() 来配置路由信息。

RouterModule.forRoot()

RouterModule.forRoot() 方法用于在主模块中定义主要的路由信息，通过调用该方法使得我们的主模块可以访问路由模块中定义的所有指令。接下来我们来看一下如何使用 forRoot() ：

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

export const ROUTES: Routes = [];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTES)
  ],
  // ...
})
export class AppModule {}

我们通过使用 const 定义路由的配置信息，然后把它作为参数调用 RouterModule.forRoot() 方法，而不是直接使用 RouterModule.forRoot([...]) 这种方式，这样做的好处是方便我们在需要的时候导出 ROUTES 到其它模块中。

RouterModule.forChild()

RouterModule.forChild() 与 Router.forRoot() 方法类似，但它只能应用在特性模块中。

友情提示：根模块中使用 forRoot()，子模块中使用 forChild()

这个功能非常强大，因为我们不必在一个地方（我们的主模块）定义所有路由信息。反之，我们可以在特性模块中定义模块特有的路由信息，并在必要的时候将它们导入我们主模块。RouterModule.forChild() 的使用方法如下：

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

export const ROUTES: Routes = [];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(ROUTES)
  ],
  // ...
})
export class ChildModule {}

通过以上示例，我们知道在主模块和特性模块中，路由配置对象的类型是一样的，区别只是主模块和特性模块中需调用不同的方法，来配置模块路由。接下来我们来介绍一下如何配置 ROUTES 对象。

Configuring a route

我们定义的所有路由都是作为 ROUTES 数组中的对象。首先，为我们的主页定义一个路由：

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

import { HomeComponent } from './home/home.component';

export const ROUTES: Routes = [
  { path: '', component: HomeComponent }
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTES)
  ],
  // ...
})
export class AppModule {}

示例中我们通过 path 属性定义路由的匹配路径，而 component 属性用于定义路由匹配时需要加载的组件。

友情提示：我们使用 path: '' 来匹配空的路径，例如：https://yourdomain.com

Displaying routes

配置完路由信息后，下一步是使用一个名为 router-outlet 的指令告诉 Angular 在哪里加载组件。当 Angular 路由匹配到响应路径，并成功找到需要加载的组件时，它将动态创建对应的组件，并将其作为兄弟元素，插入到 router-outlet 元素之后。

在我们 AppComponent 组件中，我们可以在任意位置插入 router-outlet 指令：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      <h3>Our app</h3>
      <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent {}

我们现在已经建立了应用程序的主路由，我们可以进一步了解路由的其它配置选项。

Further configuration

到目前为止我们已经介绍的内容只是一个开始 ，接下来我们来看看其它一些选项和功能。

Dynamic routes

如果路由始终是静态的，那没有多大的用处。例如 path: '' 是加载我们 HomeComponent 组件的静态路由。我们将介绍动态路由，基于动态路由我们可以根据不同的路由参数，渲染不同的页面。

例如，如果我们想要在个人资料页面根据不同的用户名显示不同的用户信息，我们可以使用以下方式定义路由：

import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';

export const ROUTES: Routes = [
  { path: '', component: HomeComponent },
  { path: '/profile/:username', component: ProfileComponent }
];

这里的关键点是 : ，它告诉 Angular 路由，:username 是路由参数，而不是 URL 中实际的部分。

友情提示：如果没有使用 : ，它将作为静态路由，仅匹配 /profile/username 路径

现在我们已经建立一个动态路由，此时最重要的事情就是如何获取路由参数。要访问当前路由的相关信息，我们需要先从 @angular/router 模块中导入 ActivatedRoute ，然后在组件类的构造函数中注入该对象，最后通过订阅该对象的 params 属性，来获取路由参数，具体示例如下：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'profile-page',
  template: `
    <div class="profile">
      <h3>{{ username }}</h3>
    </div>
  `
})
export class SettingsComponent implements OnInit {
  username: string;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.route.params.subscribe((params) => this.username = params.username);
  }
}

介绍完动态路由，我们来探讨一下如何创建 child routes。

Child routes

实际上每个路由都支持子路由，假设在我们 /settings 设置页面下有 /settings/profile 和 /settings/password 两个页面，分别表示个人资料页和修改密码页。

我们可能希望我们的 / settings 页面拥有自己的组件，然后在设置页面组件中显示 / settings/profile 和 / settings/password 页面。我们可以这样做：

import { SettingsComponent } from './settings/settings.component';
import { ProfileSettingsComponent } from './settings/profile/profile.component';
import { PasswordSettingsComponent } from './settings/password/password.component';

export const ROUTES: Routes = [
  { 
    path: 'settings', 
    component: SettingsComponent,
    children: [
      { path: 'profile', component: ProfileSettingsComponent },
      { path: 'password', component: PasswordSettingsComponent }
    ]
  }
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTES)
  ],
})
export class AppModule {}

在这里，我们在 setttings 路由中定义了两个子路由，它们将继承父路由的路径，因此修改密码页面的路由匹配地址是 /settings/password ，依此类推。

接下来，我们需要做的最后一件事是在我们的 SettingsComponent 组件中添加 router-outlet 指令，因为我们要在设置页面中呈现子路由。如果我们没有在 SettingsComponent 组件中添加 router-outlet 指令，尽管 /settings/password 匹配修改密码页面的路由地址，但修改密码页面将无法正常显示。具体代码如下：

import { Component } from '@angular/core';

@Component({
  selector: 'settings-page',
  template: `
    <div class="settings">
      <settings-header></settings-header>
      <settings-sidebar></settings-sidebar>
      <router-outlet></router-outlet>
    </div>
  `
})
export class SettingsComponent {}

Component-less routes

另一个很有用的路由功能是 component-less 路由。使用 component-less 路由允许我们将路由组合在一起，并让它们共享路由配置信息和 outlet。

例如，我们可以定义 setttings 路由而不需要使用 SettingsComponent 组件：

import { ProfileSettingsComponent } from './settings/profile/profile.component';
import { PasswordSettingsComponent } from './settings/password/password.component';

export const ROUTES: Routes = [
  {
    path: 'settings',
    children: [
      { path: 'profile', component: ProfileSettingsComponent },
      { path: 'password', component: PasswordSettingsComponent }
    ]
  }
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTES)
  ],
})
export class AppModule {}

此时， /settings/profile 和 /settings/password 路由定义的内容，将显示在 AppComponent 组件的 router-outlet 元素中。

loadChildren

我们也可以告诉路由从另一个模块中获取子路由。这将我们谈论的两个想法联系在一起 - 我们可以指定另一个模块中定义的子路由，以及通过将这些子路由设置到特定的路径下，来充分利用 component-less 路由的功能。

让我们创建一个 SettingsModule 模块，用来保存所有 setttings 相关的路由信息：

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

export const ROUTES: Routes = [
  {
    path: '',
    component: SettingsComponent,
    children: [
      { path: 'profile', component: ProfileSettingsComponent },
      { path: 'password', component: PasswordSettingsComponent }
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(ROUTES)
  ],
})
export class SettingsModule {}

需要注意的是，在 SettingsModule 模块中我们使用 forChild() 方法，因为 SettingsModule 不是我们应用的主模块。

另一个主要的区别是我们将 SettingsModule 模块的主路径设置为空路径 ('')。因为如果我们路径设置为 /settings ，它将匹配 /settings/settings ，很明显这不是我们想要的结果。通过指定一个空的路径，它就会匹配 /settings 路径，这就是我们想要的结果。

那么 /settings 路由信息，需要在哪里配置？答案是在 AppModule 中。这时我们就需要用到 loadChildren 属性，具体如下：

export const ROUTES: Routes = [
  {
    path: 'settings',
    loadChildren: './settings/settings.module#SettingsModule'
  }
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTES)
  ],
  // ...
})
export class AppModule {}

需要注意的是，我们没有将 SettingsModule 导入到我们的 AppModule 中，而是通过 loadChildren 属性，告诉 Angular 路由依据 loadChildren 属性配置的路径去加载 SettingsModule 模块。这就是模块懒加载功能的具体应用，当用户访问 /settings/** 路径的时候，才会加载对应的 SettingsModule 模块，这减少了应用启动时加载资源的大小。

另外我们传递一个字符串作为 loadChildren 的属性值，该字符串由三部分组成：

• 需要导入模块的相对路径
• # 分隔符
• 导出模块类的名称

了解完路由的一些高级选项和功能，接下来我们来介绍路由指令。

Router Directives

除了 router-outlet 指令，路由模块中还提供了一些其它指令。让我们来看看它们如何与我们之前介绍的内容结合使用。

routerLink

为了让我们链接到已设置的路由，我们需要使用 routerLink 指令，具体示例如下：

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/settings/password">Change password</a>
  <a routerLink="/settings/profile">Profile Settings</a>
</nav>

当我们点击以上的任意链接时，页面不会被重新加载。反之，我们的路径将在 URL 地址栏中显示，随后进行后续视图更新，以匹配 routerLink 中设置的值。

友情提示：我们也可以将 routerLink 的属性值，改成数组形式，以便我们传递特定的路由信息

如果我们想要链接到动态的路由地址，且该地址有一个 username 的路由变量，则我们可以按照以下方式配置 routerLink 对应的属性值：

<a [routerLink]="['/profile', username]">
  Go to {{ username }}'s profile.
</a>

routerLinkActive

在实际开发中，我们需要让用户知道哪个路由处于激活状态，通常情况下我们通过向激活的链接添加一个 class 来实现该功能。为了解决上述问题，Angular 路由模块为我们提供了 routerLinkActive 指令，该指令的使用示例如下：

<nav>
  <a routerLink="/settings" routerLinkActive="active">Home</a>
  <a routerLink="/settings/password" routerLinkActive="active">Change password</a>
  <a routerLink="/settings/profile" routerLinkActive="active">Profile Settings</a>
</nav>

通过使用 routerLinkActive 指令，当 a 元素对应的路由处于激活状态时，active 类将会自动添加到 a 元素上。

最后，我们来简单介绍一下 Router API。

Router API

我们可以通过路由还提供的 API 实现与 routerLink 相同的功能。要使用 Router API，我们需要在组件类中注入 Router 对象，具体如下：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      <h3>Our app</h3>
      <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent {
  constructor(private router: Router) {}
}

组件类中注入的 router 对象中有一个 navigate() 方法，该方法支持的参数类型与 routerLink 指令一样，当调用该方法后，页面将会自动跳转到对应的路由地址。具体使用示例如下：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      <h3>Our app</h3>
      <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}
  ngOnInit() {
    setTimeout(() => {
      this.router.navigate(['/settings']);
    }, 5000);
  }
}

若以上代码成功运行，用户界面将在 5 秒后被重定向到 /settings 页面。这个方法非常有用，例如当检测到用户尚未登录时，自动重定向到登录页面。

另一个使用示例是演示页面跳转时如何传递数据，具体如下：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      <h3>Users</h3>
      <div *ngFor="let user of users">
        <user-component 
          [user]="user"
          (select)="handleSelect($event)">
        </user-component>
      </div>
      <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent implements OnInit {
  users: Username[] = [
    { name: 'toddmotto', id: 0 },
    { name: 'travisbarker', id: 1 },
    { name: 'tomdelonge', id: 2 }
  ];
  
  constructor(private router: Router) {}
  
  handleSelect(event) {
    this.router.navigate(['/profile', event.name]);
  }
}

Angular 路由的功能非常强大，既可以使用指令方式也可以使用命令式 API，希望本文可以帮助你尽快入门，若要进一步了解路由详细信息，请访问 - Angular Router 官文文档。

我有话说

除了使用 navigate() 方法外还有没有其它方法可以实现页面导航？

Angular Router API 为我们提供了 navigate() 和 navigateByUrl() 方法来实现页面导航。那为什么会有两个不同的方法呢？

使用 router.navigateByUrl() 方法与直接改变地址栏上的 URL 地址一样，我们使用了一个新的 URL 地址。然而 router.navigate() 方法基于一系列输入参数，产生一个新的 URL 地址。为了更好的区分它们之间的差异，我们来看个例子，假设当前的 URL 地址是：

/inbox/11/message/22(popup:compose)

当我们调用 router.navigateByUrl('/inbox/33/message/44') 方法后，此时的 URL 地址将变成 /inbox/33/message/44 。但如果我们是调用 router.navigate('/inbox/33/message/44') 方法，当前的 URL 地址将变成 /inbox/33/message/44(popup:compose) 。

参考资源

• Toddd - Getting started with Angular's Router

现在很多web网站都采用了SPA单页应用，单页面有很多优点：用户体验好、应用响应快、对服务器压力小 等等。同时也有一些缺点：首次加载资源太多，不利于SEO，前进、后退、地址栏需要手动管理。今天我们实现Angular单页面应用中路由变化设置页面标题，来优化用户的用户体验。可以先去掘金看下效果。稀土掘金

在AngularJS（1.x）中动态设置页面标题通常是通过一个全局$rootScope对象来完成的，通过$rootScope对象监听路由变化获取当前路由信息并映射到页面标题。在Angular（v2 +）中，解决起来要比1.x容易得多，我们可以通过注入一个provider，在路由变化事件中使用provider提供的API来动态更新页面标题。

Title Service

在angular中，我们可以通过Title来设置页面标题。我们从platform-browser导入Title, 同时也导入Router。

import { Title } from '@angular/platform-browser';
import { Router } from '@angular/router';

导入之后，我们在组件的构造函数中注入他们

@Component({
  selector: 'app-root',
  templateUrl: `
    <div>
      Hello world!
    </div>
  `
})
export class AppComponent {
  constructor(private router: Router, private titleService: Title) {}
}

在使用Title之前，我们先看下Title是如何定义的

export class Title {
  /**
   * Get the title of the current HTML document.
   * @returns {string}
   */
  getTitle(): string { return getDOM().getTitle(); }

  /**
   * Set the title of the current HTML document.
   * @param newTitle
   */
  setTitle(newTitle: string) { getDOM().setTitle(newTitle); }
}

Title类有两个方法，一个用来获取页面标题getTitle， 一个是用来设置页面标题的setTitle

要更新页面标题，我们可以简单的调用setTitle方法:

@Component({...})
export class AppComponent implements OnInit {
  constructor(private router: Router, private titleService: Title) {}
  ngOnInit() {
    this.titleService.setTitle('My awesome app');
  }
}

这样就可以设置我们的页面标题了，但是很不优雅。我们接着往下看。

在AngularJS中，我们可以使用ui-router为每个路由添加一个自定义对象，自定义的对象在路由器的状态链中继承：

// AngularJS 1.x + ui-router
.config(function ($stateProvider) {
  $stateProvider
    .state('about', {
      url: '/about',
      component: 'about',
      data: {
        title: 'About page'
      }
    });
});

在Angular2+中，我们也可以为每个路由定义一个data对象，然后再在监听路由变化时做一些额外的逻辑处理就可以实现动态设置页面标题。首先，我们定义一个基本的路由：

const routes: Routes = [{
  path: 'calendar',
  component: CalendarComponent,
  children: [
    { path: '', redirectTo: 'new', pathMatch: 'full' },
    { path: 'all', component: CalendarListComponent },
    { path: 'new', component: CalendarEventComponent },
    { path: ':id', component: CalendarEventComponent }
  ]
}];

在这里定义一个日历应用，他有一个路由/calendar， 还有三个子路由， /all对应日历列表页，new对应新建日历，:id对应日历详情。现在，我们定义一个data对象然后设置一个title属性来作为每个页面的标题。

const routes: Routes = [{
  path: 'calendar',
  component: CalendarComponent,
  children: [
    { path: '', redirectTo: 'new', pathMatch: 'full' },
    { path: 'all', component: CalendarListComponent, data: { title: 'My Calendar' } },
    { path: 'new', component: CalendarEventComponent, data: { title: 'New Calendar Entry' } },
    { path: ':id', component: CalendarEventComponent, data: { title: 'Calendar Entry' } }
  ]
}];

好了，路由定义完了，现在我们看下如何监听路由变化

Routing events

Angular路由配置非常简单，但是路由通过Observables使用起来也非常强大。
我们可以在根组件中全局监听路由的变化:

ngOnInit() {
  this.router.events
    .subscribe((event) => {
      // example: NavigationStart, RoutesRecognized, NavigationEnd
      console.log(event);
    });
}

我们要做的就是在导航结束时获取到定义的数据然后设置页面标题，可以检查 NavigationStart, RoutesRecognized, NavigationEnd 哪种事件是我们需要的方式，理想情况下NavigationEnd，我们可以这么做：

this.router.events
  .subscribe((event) => {
    if (event instanceof NavigationEnd) { // 当导航成功结束时执行
      console.log('NavigationEnd:', event);
    }
  });

这样我们就可以在导航成功结束时做一些逻辑了，因为Angular路由器是reactive响应式的，所以我们可以使用 RxJS 实现更多的逻辑，我们来导入以下操作符：

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

现在我们已经添加了 filter，map 和 mergeMap 三个操作符，我们可以过滤出导航结束的事件：

this.router.events
  .filter(event => event instanceof NavigationEnd)
  .subscribe((event) => {
    console.log('NavigationEnd:', event);
  });

其次，因为我们已经注入了Router类，我们可以使用 routerState 来获取路由状态树得到最后一个导航成功的路由：

this.router.events
  .filter(event => event instanceof NavigationEnd)
  .map(() => this.router.routerState.root)
  .subscribe((event) => {
    console.log('NavigationEnd:', event);
  });

然而，一个更好的方式就是使用 ActivatedRoute 来代替 routerState.root, 我们可以将其ActivatedRoute注入类中：

import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';

@Component({...})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private titleService: Title
  ) {}
  ngOnInit() {
    // our code is in here
  }
}

注入之后我们再来优化下：

this.router.events
  .filter(event => event instanceof NavigationEnd)
  .map(() => this.activatedRoute)
  .subscribe((event) => {
    console.log('NavigationEnd:', event);
  });

我们使用 map 转换了我们观察到的内容，返回一个新的对象 this.activatedRoute 在 stream 流中继续执行。 我们使用 filter(过滤出导航成功结束) 和 map(返回我们的路由状态树) 成功地返回我们想要的事件类型 NavigationEnd。

接下来是最有意思的部分，我们将创建一个while循环遍历状态树得到最后激活的 route，然后将其作为结果返回到流中：

this.router.events
  .filter(event => event instanceof NavigationEnd)
  .map(() => this.activatedRoute)
  .map(route => {
    while (route.firstChild) route = route.firstChild;
    return route;
  })
  .subscribe((event) => {
    console.log('NavigationEnd:', event);
  });

接下来我们可以通过路由配置的属性来获取相应的页面标题。然后，我们还需要另外两个运算符：

this.router.events
  .filter(event => event instanceof NavigationEnd)
  .map(() => this.activatedRoute)
  .map(route => {
    while (route.firstChild) route = route.firstChild;
    return route;
  })
  .filter(route => route.outlet === 'primary')  // 过滤出未命名的outlet，<router-outlet>
  .mergeMap(route => route.data)                // 获取路由配置数据
  .subscribe((event) => {
    console.log('NavigationEnd:', event);
  });

现在我们 titleService 只需要实现：

.subscribe((event) => this.titleService.setTitle(event['title']));

下面看一下最终代码：

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';

@Component({...})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private titleService: Title
  ) {}
  ngOnInit() {
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .map(() => this.activatedRoute)
      .map(route => {
        while (route.firstChild) route = route.firstChild;
        return route;
      })
      .filter(route => route.outlet === 'primary')
      .mergeMap(route => route.data)
      .subscribe((event) => this.titleService.setTitle(event['title']));
  }
}

本文翻译自dynamic-page-titles-angular-2-router-events, 本人水平有限，如果有翻译不好的地方欢迎大家联系我

RouterLink 指令简介

RouterLink 指令可以让你链接到应用程序的特定部分。若链接是静态的，我们可以按照以下的方式，来使用该指令：

<a routerLink="/user/bob">link to user component</a>

如果你需要使用动态值生成链接地址，你可以传递一个路径片段 (segments) 的数组，然后再传递每个段的参数。例如使用 ['/team', teamId, 'user', userName, {details: true}] 数组，意味着我们想要生成一个链接到 /team/11/user/bob;details=true 。

多个静态段 (segments) 能够被合并为一个，例如 ['/team/11/user', userName, {details: true}] 。

第一个路径片段可以以 / ，./ 或 ../ 开头：

• 如果以 / 开头，路由将从根路由开始查找

• 如果以 ./ 开头或没有使用 / ，则路由将从当前激活路由的子路由开始查找

• 如果以 ../ 开头，路由往上一级查找

你可以使用以下方式设置查询参数和片段 (fragment)：

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
   link to user component
</a>

RouterLink 指令将基于以上设定的输入参数，生成如下链接：/user/bob#education?debug=true 。此外我们可以通过 queryParamsHandling 属性来声明如何处理查询参数，可用的选项是：

• merge - 合并已有的 queryParams 到当前的 queryParams 中

• preserve - 保存当前的 queryParams

• default ('') - 仅使用查询参数

具体使用示例如下：

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge">
    link to user component
</a>

RouterLink 指令详解

RouterLink 指令定义

@Directive({selector: ':not(a)[routerLink]'})

RouterLink 指令输入属性

// 设置URL相关的查询参数
@Input() queryParams: {[k: string]: any};

// 设置URL上的hash fragment
@Input() fragment: string; 

// 设置查询参数处理方式：merge、preserve 、default 
@Input() queryParamsHandling: QueryParamsHandling; 

// 设置是否保留fragment
@Input() preserveFragment: boolean;

// 设置页面导航时，是否把新的状态添加到历史记录中
@Input() skipLocationChange: boolean;

// 设置页面导航的同时，是否替换历史记录中的当前状态
@Input() replaceUrl: boolean;
 
// 设置commands参数信息，如：['/user/bob']
@Input()
set routerLink(commands: any[]|string) {
    if (commands != null) {
      this.commands = Array.isArray(commands) ? commands : [commands];
    } else {
      this.commands = [];
    }
}

RouterLink 指令绑定

事件绑定

// 监听RouterLink指令宿主元素的click事件，进行页面切换
@HostListener('click')
onClick(): boolean {
  const extras = {
     skipLocationChange: attrBoolValue(this.skipLocationChange),
     replaceUrl: attrBoolValue(this.replaceUrl),
   };
   this.router.navigateByUrl(this.urlTree, extras);
   return true;
}

// 转化设置的属性值为bool值
function attrBoolValue(s: any): boolean {
  return s === '' || !!s;
}

RouterLink 类的构造函数

export class RouterLink { 
    constructor(
      private router: Router, 
      private route: ActivatedRoute,
      @Attribute('tabindex') tabIndex: string, 
      renderer: Renderer, el: ElementRef) {
        if (tabIndex == null) {
          renderer.setElementAttribute(el.nativeElement, 'tabindex', '0');
        }
    }
}

@Attribute()

@Attribute('attributeName') 装饰器：用于获取指令宿主元素上 attributeName 属性名对应的属性值。

tabindex

tabindex 属性规定元素的 tab 键控制次序 (当 tab 键用于导航时)。

以下元素支持 tabindex 属性：<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea> 。

tabindex 语法：

<element tabindex="number"> <!-- number：规定元素的 tab 键控制次序 (1是第一个)-->

RouterLink 类的属性

// 用于保存commands参数信息
private commands: any[] = [];

// 标识是否保存查询参数，4.0.0版本后用queryParamsHandling代替
private preserve: boolean;

RouterLink 类的方法

// 获取routerLink上配置信息对应的UrlTree
get urlTree(): UrlTree {
    return this.router.createUrlTree(this.commands, {
      relativeTo: this.route,
      queryParams: this.queryParams,
      fragment: this.fragment,
      preserveQueryParams: attrBoolValue(this.preserve),
      queryParamsHandling: this.queryParamsHandling,
      preserveFragment: attrBoolValue(this.preserveFragment),
    });
}

// angular\packages\router\src\router.ts
// 创建UrlTree
createUrlTree(
    commands: any[],
    {relativeTo, queryParams, fragment, 
     preserveQueryParams, queryParamsHandling,preserveFragment}: 
      NavigationExtras = {}): UrlTree {
    if (isDevMode() && preserveQueryParams && <any>console && <any>console.warn) {
      console.warn('preserveQueryParams is deprecated, use queryParamsHandling instead.');
    }
    const a = relativeTo || this.routerState.root;
    const f = preserveFragment ? this.currentUrlTree.fragment : fragment;
    let q: Params|null = null;
    // 根据queryParamsHandling属性值，处理查询参数
    if (queryParamsHandling) {
      switch (queryParamsHandling) {
        case 'merge':
          q = {...this.currentUrlTree.queryParams, ...queryParams};
          break;
        case 'preserve':
          q = this.currentUrlTree.queryParams;
          break;
        default:
          q = queryParams || null;
      }
    } else {
      q = preserveQueryParams ? this.currentUrlTree.queryParams : queryParams || null;
    }
    return createUrlTree(a, this.currentUrlTree, commands, q !, f !);
}

RouterLinkWithHref 指令详解

RouterLinkWithHref 指令定义

@Directive({selector: 'a[routerLink]'})

RouterLinkWithHref 指令输入属性

// 设置a标签target的值
@Input() target: string;

// 设置URL相关的查询参数
@Input() queryParams: {[k: string]: any};

// 设置URL上的hash fragment
@Input() fragment: string;

// 设置查询参数处理方式：merge、preserve 、default 
@Input() queryParamsHandling: QueryParamsHandling;

// 设置是否保留fragment
@Input() preserveFragment: boolean;

// 设置页面导航时，是否把新的状态添加到历史记录中
@Input() skipLocationChange: boolean;

// 设置页面导航的同时，是否替换历史记录中的当前状态
@Input() replaceUrl: boolean;

// 设置commands信息，如：['/user/bob']
@Input()
set routerLink(commands: any[]|string) {
    if (commands != null) {
      this.commands = Array.isArray(commands) ? commands : [commands];
    } else {
      this.commands = [];
    }
}

RouterLinkWithHref 指令绑定

属性绑定

@HostBinding('attr.target') @Input() target: string;
@HostBinding() href: string;

<a> 标签定义超链接，用于从一个页面链接到另外一个页面。<a> 标签中有两个重要的属性：

• href - 规定链接指向的页面的 URL 地址。如果不使用 href 属性，则不可以使用如下属性：download, media, rel, target 以及 type 属性。

• target - 规定链接的页面在浏览器窗口中的打开方式，它的参数值主要有：

  • _blank - 在新的浏览器窗口中载入目标文档。

  • _parent - 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

  • _self - 这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。

  • _top - 这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

事件绑定

// 监听RouterLink指令宿主元素的click事件，进行页面切换
@HostListener('click', ['$event.button', '$event.ctrlKey', '$event.metaKey'])
  onClick(button: number, ctrlKey: boolean, metaKey: boolean): boolean {
    if (button !== 0 || ctrlKey || metaKey) {
      return true;
    }

    if (typeof this.target === 'string' && this.target != '_self') {
      return true;
    }

    const extras = {
      skipLocationChange: attrBoolValue(this.skipLocationChange),
      replaceUrl: attrBoolValue(this.replaceUrl),
    };
    this.router.navigateByUrl(this.urlTree, extras);
    return false;
}

MouseEvent 表示用户与指针设备 (如鼠标) 交互时发生的事件，常见的事件包括：click、dblclick、mouseup 与 mousedown 事件。其中 MouseEvent 对象中包含一个 button 属性，用于表示用户按下的鼠标按键，可能的属性值如下：

• 0 - 主按键被按下，通常指鼠标左键。

• 1 - 辅助按键被按下，通常指鼠标滚轮。

• 2 - 次按键被按下，通常指鼠标右键。

• 3 - 第四个按钮被按下，通常指浏览器后退按钮。

• 4 - 第五个按钮被按下，通常指浏览器的前进按钮。

对于配置为左手使用的鼠标，按键操作将正好相反。此种情况下，从右至左读取值。在上面示例代码中，我们还访问了 MouseEvent 对象的 ctrlKey 和 metaKey 属性，此外除了这两个属性外 MouseEvent 对象中还包含 altKey 和 shiftKey 属性。这些属性的相关说明如下：

• MouseEvent.ctrlKey - 当鼠标事件触发时，如果 control 键被按下，则返回 true。

• MouseEvent.metaKey - 当鼠标事件触发时，如果 (Window - ⊞ ，Mac - ⌘ Command ) 键被按下，则返回 true。

• MouseEvent.altKey - 当鼠标事件触发的时候，如果 (Window - alt ，Mac - Option 或 ⌥ ) 键被按下，返回true。

• MouseEvent.shiftKey - 当鼠标事件触发时，如果 shift 键被按下，则返回 true。

若按下 ctrlKey ，再点击 <a> 标签，则会使用当前的 URL 地址，新建一个新的 tab 页。若按下 metaKey ，再点击 <a> 标签，则会重新刷新当前页。因此在 onClick() 方法中，才会执行相应的判断。

RouterLinkWithHref 指令生命周期

ngOnChanges()

// 输入属性发生变化时，更新a标签href属性
ngOnChanges(changes: {}): any { 
  this.updateTargetUrlAndHref();
}

ngOnDestroy()

// 指令销毁时，取消路由事件的订阅
ngOnDestroy(): any { 
  this.subscription.unsubscribe(); 
}

RouterLinkWithHref 类的构造函数

export class RouterLinkWithHref implements OnChanges, OnDestroy {
  constructor(
      private router: Router, 
      private route: ActivatedRoute,
      private locationStrategy: LocationStrategy) {
      // 订阅路由事件，当页面切换成功后更新a标签的href属性
      this.subscription = router.events.subscribe(s => {
      if (s instanceof NavigationEnd) {
        this.updateTargetUrlAndHref();
      }
    });
  }
}

RouterLinkWithHref 类的属性

// 用于保存commands参数信息
private commands: any[] = [];

// 用于保存取消订阅路由事件订阅的Subscription对象
private subscription: Subscription;

// 标识是否保存查询参数，4.0.0版本后用queryParamsHandling代替
private preserve: boolean;

RouterLinkWithHref 类的方法

// 获取routerLink上配置信息对应的UrlTree
get urlTree(): UrlTree {
    return this.router.createUrlTree(this.commands, {
      relativeTo: this.route,
      queryParams: this.queryParams,
      fragment: this.fragment,
      preserveQueryParams: attrBoolValue(this.preserve),
      queryParamsHandling: this.queryParamsHandling,
      preserveFragment: attrBoolValue(this.preserveFragment),
    });
}

// 更新a标签href属性值
private updateTargetUrlAndHref(): void {
    this.href = this.locationStrategy
      .prepareExternalUrl(this.router.serializeUrl(this.urlTree));
}

RouterLinkActive 指令简介

RouterLinkActive 指令允许你在链接的路由变为活动状态时向元素添加 CSS 类。请看一下以下示例：

<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

当 URL 地址是 /user 或 /user/bob 时，active-link 类将会被添加到 <a> 标签上。如果 URL 发生变化，则 active-link 类将自动从 <a> 标签上移除。你也可以一次性添加多个类，具体如下：

<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>
<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>

在应用 routerLinkActive 指令时，你也可以通过 routerLinkActiveOptions 参数，来配置 URL 的匹配方式，具体如下：

<a routerLink="/user/bob" routerLinkActive="active-link" 
  [routerLinkActiveOptions]="{exact: true}">Bob</a>

当配置了 {exact: true} 参数，仅当 URL 地址完全匹配时，active-link 类才会被添加到 <a> 标签上。此外你可以将 RouterLinkActive 实例分配给模板变量，并直接检查指令的 isActive 状态：

<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive">
    Bob {{ rla.isActive ? '(already open)' : ''}}
</a>

最后，你也可以将 RouterLinkActive 指令应用于 RouterLink 的父级元素。具体示例如下：

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>

在上面示例中，当 URL 的地址为 /user/jim 或 /user/bob 时，active-link 类会被添加到对应的 <div> 元素上。

RouterLinkActive 指令详解

RouterLinkActive 指令定义

@Directive({
  selector: '[routerLinkActive]',
  exportAs: 'routerLinkActive',
})

RouterLinkActive 指令输入属性

// 设置处于激活状态时，宿主元素上应用的class信息
@Input()
set routerLinkActive(data: string[]|string) {
  const classes = Array.isArray(data) ? data : data.split(' ');
  this.classes = classes.filter(c => !!c);
}

// 设置URL地址的匹配方式
@Input() routerLinkActiveOptions: {exact: boolean} = {exact: false};

RouterLinkActive 指令生命周期

ngAfterContentInit()

// 订阅RouterLink或RouterLinkWithHref集合的changes对象，从而自动更新宿主元素的class信息
ngAfterContentInit(): void {
    this.links.changes.subscribe(_ => this.update());
    this.linksWithHrefs.changes.subscribe(_ => this.update());
    this.update();
}

ngOnChanges()

// 输入属性变化时，更新宿主元素的class信息
ngOnChanges(changes: SimpleChanges): void { this.update(); }

ngOnDestroy()

// 指令销毁时，取消路由事件的订阅
ngOnDestroy(): void { this.subscription.unsubscribe(); }

RouterLinkActive 类的构造函数

export class RouterLinkActive implements OnChanges,
    OnDestroy, AfterContentInit {
      constructor(
        private router: Router, 
        private element: ElementRef, 
        private renderer: Renderer,
          private cdr: ChangeDetectorRef) {
         // 订阅路由事件，当页面切换成功后更新宿主元素上的class信息
          this.subscription = router.events.subscribe(s => {
            if (s instanceof NavigationEnd) {
              this.update();
            }
    });
  }
}

RouterLinkActive 类的属性

// 获取RouterLink集合
@ContentChildren(RouterLink, {descendants: true}) links: QueryList<RouterLink>;

// 获取RouterLinkWithHref集合
@ContentChildren(RouterLinkWithHref, {descendants: true})
  linksWithHrefs: QueryList<RouterLinkWithHref>;
  
// 激活状态的样式列表
private classes: string[] = [];

// 用于保存取消订阅路由事件订阅的Subscription对象
private subscription: Subscription;

// 标识是否处于激活状态
private active: boolean = false;

RouterLinkActive 类的方法

// 获取激活状态
get isActive(): boolean { return this.active; }

// 更新宿主元素的class信息
private update(): void {
    if (!this.links || !this.linksWithHrefs || !this.router.navigated) return;
    const hasActiveLinks = this.hasActiveLinks();

    // react only when status has changed to prevent unnecessary dom updates
    if (this.active !== hasActiveLinks) {
      this.classes.forEach(
          c => this.renderer.setElementClass(this.element.nativeElement, c, hasActiveLinks));
      Promise.resolve(hasActiveLinks).then(active => this.active = active);
    }
}

// 判断是否是激活的链接
private isLinkActive(router: Router): (link: (RouterLink|RouterLinkWithHref)) => boolean {
  return (link: RouterLink | RouterLinkWithHref) =>
           router.isActive(link.urlTree, this.routerLinkActiveOptions.exact);
}

// 判断RouterLink或RouterLinkWithHref集合中是否含有激活的链接
private hasActiveLinks(): boolean {
  return this.links.some(this.isLinkActive(this.router)) ||
      this.linksWithHrefs.some(this.isLinkActive(this.router));
}

更新时间 - 2017-03-22

Input 是属性装饰器，用来定义组件内的输入属性。在实际应用场合，我们主要用来实现父组件向子组件传递数据。Angular 应用是由各式各样的组件组成，当应用启动时，Angular 会从根组件开始启动，并解析整棵组件树，数据由上而下流下下一级子组件。

@Input()

counter.component.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    @Input() count: number = 0;

    increment() {
        this.count++;
    }

    decrement() {
        this.count--;
    }
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'exe-app',
  template: `
   <exe-counter [count]="initialCount"></exe-counter>
  `
})
export class AppComponent {
  initialCount: number = 5;
}

以上代码运行后浏览器显示的结果：

@Input('bindingPropertyName')

Input 装饰器支持一个可选的参数，用来指定组件绑定属性的名称。如果没有指定，则默认使用 @Input 装饰器，装饰的属性名。具体示例如下：

counter.component.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    @Input('value') count: number = 0;
    ... // 其余代码未改变
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'exe-app',
  template: `
   <exe-counter [value]="initialCount"></exe-counter>
  `
})
export class AppComponent {
  initialCount: number = 5;
}

@Component() - inputs

import { Component, Input } from '@angular/core';

@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `,
    inputs:['count:value'] // 类成员属性名称:绑定的输入属性名称
})
export class CounterComponent {

    count: number = 0;

    increment() {
        this.count++;
    }

    decrement() {
        this.count--;
    }
}

setter & getter

setter 和 getter 是用来约束属性的设置和获取，它们提供了一些属性读写的封装，可以让代码更便捷，更具可扩展性。通过 setter 和 getter 方式，我们对类中的私有属性进行了封装，能避免外界操作影响到该私有属性。此外通过 setter 我们还可以封装一些业务逻辑，具体示例如下：

counter.component.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }} </p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    _count: number = 0; // 默认私有属性以下划线开头，不是必须也可以使用$count
    biggerThanTen: boolean = false;

    @Input()
    set count (num: number) {
        this.biggerThanTen = num > 10;
        this._count = num;
    }

    get count(): number {
        return this._count;
    }

    increment() {
        this.count++;
    }

    decrement() {
        this.count--;
    }
}

ngOnChanges

当数据绑定输入属性的值发生变化的时候，Angular 将会主动调用 ngOnChanges 方法。它会获得一个 SimpleChanges 对象，包含绑定属性的新值和旧值，它主要用于监测组件输入属性的变化。具体示例如下：

import { Component, Input, SimpleChanges, OnChanges } from '@angular/core';

@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent implements OnChanges{
    @Input() count: number = 0;

    ngOnChanges(changes: SimpleChanges) {
        console.dir(changes['count']);
    }

    increment() {
        this.count++;
    }

    decrement() {
        this.count--;
    }
}

以上代码运行后浏览器显示的结果：

上面例子中需要注意的是，当手动改变输入属性的值，是不会触发 ngOnChanges 钩子的。

我有话说

1.在构造函数中是获取不到输入属性的值

在子组件的构造函数中，是无法获取输入属性的值，只能在 ngOnChanges 或 ngOnInit 钩子中获取到。因为子组件的构造函数会优先执行，当子组件输入属性变化时会自动调用 ngOnChanges 钩子，然后在调用 ngOnInit 钩子，所以在 ngOnInit 钩子内能获取到输入的属性。

具体详情可参考 - Angular 2 constructor & ngOnInit

2.不能同时使用 @Input 装饰器 或在 @Directive、@Component inputs 字段中定义同一个输入属性，具体示例如下：

@Component({
    selector: 'exe-counter',
    inputs:['count:value'] 
})
export class CounterComponent {
    @Input('value') count: number = 0;
}

3.@Input vs inputs

相同点：

• 它们都是用来定义输入属性

异同点：

• inputs 定义在指令的 metadata 信息中，开发者对指令的输入属性一目了然。此外对于未选用 TypeScript 作为开发语言的开发者，也只能在 metadata 中定义指令的输入属性。

• @Input 属于属性装饰器，通过它我们可以一起定义属性的访问描述符 (public、private、protected)：

@Input() public attr: string;

4.输入、输出属性风格指南

4.1 坚持使用 @Input 和 @Output ，而非 @Directive 和 @Component 装饰器的 inputs 和 outputs 属性：

• 易于在类里面识别哪些属性是输入属性或输出属性。

4.2 坚持把 @Input 或者 @Output 放到所装饰的属性的同一行：

• 如果需要重命名与@Input或者@Output关联的属性或事件名，你可以在一个位置修改。

4.3 避免为输入和输出属性指定别名

• 同一个属性有两个名字（一个对内一个对外）很容易导致混淆。

详细信息请参考 - Angular 2 风格指南 - STYLE 05-12

5.项目开发中尽量通过 @Input 装饰器定义无状态的组件，即组件仅依赖于输入属性，这样会大大提高组件可复用性

阅读 Angular 6/RxJS 最新教程，请访问前端修仙之路

有时候进入某个页面时，我们需要从多个 API 地址获取数据然后进行显示。管理多个异步数据请求会比较困难，但我们可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能。处理多个请求有多种方式，使用串行或并行的方式。

基础知识

mergeMap

mergeMap 操作符用于从内部的 Observable 对象中获取值，然后返回给父级流对象。

• 合并 Observable 对象 ( jsBin)

const source = Rx.Observable.of('Hello');
//map to inner observable and flatten
const example = source.mergeMap(val => Rx.Observable.of(`${val} World!`));

const subscribe = example.subscribe(val => console.log(val)); //output: 'Hello World!'

在上面示例中包含两种 Observable 类型：

• 源 Observable 对象 - 即 source 对象
• 内部 Observable 对象 - 即 Rx.Observable.of(`${val} World!`) 对象

仅当内部的 Observable 对象发出值后，才会合并源 Observable 对象输出的值，并最终输出合并的值。

forkJoin

forkJoin 是 Rx 版本的 Promise.all()，即表示等到所有的 Observable 都完成后，才一次性返回值。

• 合并多个 Observable 对象 (jsBin)

const getPostOne$ = Rx.Observable.timer(1000).mapTo({id: 1});
const getPostTwo$ = Rx.Observable.timer(2000).mapTo({id: 2});

Rx.Observable.forkJoin(getPostOne$, getPostTwo$).subscribe(
  res => console.log(res) // [{id: 1}, {id: 2}]
); 

处理 Http 请求

我们先来看一下 Angular Http 服务简单示例。

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  template: `
    <p>HttpModule Demo</p>
  `
})
export class AppComponent implements OnInit {
  constructor(private http: Http) { }

  ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/users')
      .map(res => res.json())
      .subscribe(users => console.log(users));
  }
}

上面示例中，我们通过依赖注入方式注入 http 服务，然后在 ngOnInit() 方法中调用 http 对象的 get() 方法来获取数据。这个例子很简单，它只处理一个请求，接下来我们来看一下如何处理两个请求。

Map 和 Subscribe

有些时候，当我们发送下一个请求时，需要依赖于上一个请求的数据。即我们在需要在上一个请求的回调函数中获取相应数据，然后在发起另一个 HTTP 请求。

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  template: `
    <p>{{username}} Detail Info</p>
    {{user | json}}
  `
})
export class AppComponent implements OnInit {
  constructor(private http: Http) { }

  apiUrl = 'https://jsonplaceholder.typicode.com/users';
  username: string = '';
  user: any;

  ngOnInit() {
    this.http.get(this.apiUrl)
      .map(res => res.json())
      .subscribe(users => {
        let username = users[6].username;
        this.http.get(`${this.apiUrl}?username=${username}`)
          .map(res => res.json())
          .subscribe(
            user => {
              this.username = username;
              this.user = user;
            });
      });
  }
}

在上面示例中，我们先从 https://jsonplaceholder.typicode.com/users 地址获取所有用户的信息，然后再根据指定用户的 username 进一步获取用户的详细信息。虽然功能实现了，但有没有更好的解决方案呢？答案是有的，可以通过 RxJS 库中提供的 mergeMap 操作符来优化上述的流程。

mergeMap

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

@Component({
  selector: 'app-root',
  template: `
    <p>{{username}} Detail Info</p>
    {{user | json}}
  `
})
export class AppComponent implements OnInit {
  constructor(private http: Http) { }

  apiUrl = 'https://jsonplaceholder.typicode.com/users';

  username: string = '';

  user: any;

  ngOnInit() {
    this.http.get(this.apiUrl)
      .map(res => res.json())
      .mergeMap(users => {
        this.username = users[6].username;
        return this.http.get(`${this.apiUrl}?username=${this.username}`)
          .map(res => res.json())
      })
      .subscribe(user => this.user = user);
  }
}

在上面示例中，我们通过 mergeMap 操作符，解决了嵌套订阅的问题。最后我们来看一下如何处理多个并行的 Http 请求。

forkJoin

接下来的示例，我们将使用 forkJoin 操作符。如果你熟悉 Promises 的话，该操作符与 Promise.all() 实现的功能类似。forkJoin 操作符接收一个 Observable 对象列表，然后并行地执行它们。一旦列表的 Observable 对象都发出值后，forkJoin 操作符返回的 Observable 对象会发出新的值，即包含所有 Observable 对象输出值的列表。具体示例如下：

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/forkJoin';

@Component({
  selector: 'app-root',
  template: `
    <p>Post Detail Info</p>
    <ul>
      <li>{{post1 | json}}</li>
      <li>{{post2 | json}}</li>
    </ul>
  `
})
export class AppComponent implements OnInit {
  constructor(private http: Http) { }

  apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  post1: any;

  post2: any;

  ngOnInit() {
    let post1 = this.http.get(`${this.apiUrl}/1`);
    let post2 = this.http.get(`${this.apiUrl}/2`);

    Observable.forkJoin([post1, post2])
      .subscribe(results => {
        this.post1 = results[0];
        this.post2 = results[1];
      });
  }
}

我有话说

除了 mergeMap 外，RxJS 中的 switchMap 有什么用？

switchMap 操作符用于对源 Observable 对象发出的值，做映射处理。若有新的 Observable 对象出现，会在新的 Observable 对象发出新值后，退订前一个未处理完的 Observable 对象。

使用示例：JSBin

var source = Rx.Observable.fromEvent(document.body, 'click');
var example = source.switchMap(e => Rx.Observable.interval(100).take(3));

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : -----------c--c-----------------...
        concatMap(c => Rx.Observable.interval(100).take(3))
example: -------------0--0-1-2-----------...

以上代码运行后，控制台的输出结果：

0
0
1
2

而在实际使用 Http 服务的场景中，比如实现 AutoComplete 功能，我们可以利用 switchMap 操作符，来取消无用的 Http 请求。

参考资源

• angular-multiple-http-requests-with-rxjs
•  Six Operators That you Must Know