Angular routerLink指令的href属性生成逻辑

简介: Angular routerLink指令的href属性生成逻辑
+关注继续查看

一个例子:


image.png


运行时,触发change detection,调用refreshView方法:


image.png

RouterLinkWithHref这个class实现了ngOnChanges hook方法:


image.png


在updateTargetUrlAndHref方法里,生成href:


image.png


this.commands就是我们传入到routerLink Directive里的输入:


image.png


createUrlTree:


image.png


将JavaScript对象this.urlTree, 序列化成字符串url:

image.png




image.png

相关文章
|
前端开发 JavaScript
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
|
JavaScript 数据安全/隐私保护 索引
Angular最新教程-第十四节 指令 结构型指令 属性型指令 自定义指令
Angular最新教程-第十四节 指令 结构型指令 属性型指令 自定义指令
134 0
Angular最新教程-第十四节 指令 结构型指令 属性型指令 自定义指令
|
UED
Angular 2.x折腾记 :(9) 初步了解指令,及动手一步一步写个自定义指令
指令这种东西,可以加强用户体验,减少一些重复工作; 跟着我来实现一个悬浮链接打开的指令
83 0
Angular 自定义结构化指令,如何传入多个输入参数
Angular 自定义结构化指令,如何传入多个输入参数
148 0
Angular 自定义结构化指令,如何传入多个输入参数
关于调用 Angular 属性指令 attribute Directive 是否需要带中括号的问题
关于调用 Angular 属性指令 attribute Directive 是否需要带中括号的问题
109 0
关于调用 Angular 属性指令 attribute Directive 是否需要带中括号的问题
调试Angular指令实现时一个有用的内部属性:__ngContext__
调试Angular指令实现时一个有用的内部属性:__ngContext__
203 0
调试Angular指令实现时一个有用的内部属性:__ngContext__
|
存储 ARouter JavaScript
Angular里的RouterOutlet指令学习笔记
Angular里的RouterOutlet指令学习笔记
175 0
Angular里的RouterOutlet指令学习笔记
热门文章
最新文章
推荐文章
更多