Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including reuse-tab with all npm packages installed. Try it out:

var reuseTab = require("reuse-tab")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

reuse-tab v1.1.1

angular material reuse-tab


title: reuse-tab subtitle: 路由复用标签 cols: 1 module: AdReuseTabModule


复用标签在中台系统非常常见,本质是解决不同路由页切换时组件数据不丢失问题。

最新打开的永远是当前页,而路由复用是指当我们离开当前页时若符合复用条件(即:匹配模式)则保存当前路由所有组件状态(包括子组件),待下一次进入相同路由(即:匹配模式)时再从中缓存中获取到。

如何使用?

npm install --save reuse-tab

默认 AdReuseTabModule 并不会注册 RouteReuseStrategy,除了引入模块以外,还需要在手动注册 RouteReuseStrategy

// delon.module.ts or app.module.ts
providers: [
  {
    provide: RouteReuseStrategy,
    useClass: ReuseTabStrategy,
    deps: [ReuseTabService],
  },
  ReuseTabService
]

匹配模式

在项目的任何位置(建议:startup.service.ts)注入 ReuseTabService 类,并设置 mode 属性,或通过 <reuse-tab [mode]="0"></reuse-tab> 重新设置值,包括:

0、(推荐,默认值)

可复用:

{ text:'Dashboard' }
{ text:'Dashboard', reuse: true }

不可复用:

{ text:'Dashboard', reuse: false }

1、(推荐)

可复用:

{ text:'Dashboard', reuse: true }

不可复用:

{ text:'Dashboard' }
{ text:'Dashboard', reuse: false }

2、URL

对所有路由有效,可以配合 excludes 过滤无须复用路由。

除以上规则以外,路由配置中 data 属性若设置 reuse 值时优先级高于上述规则。

标签文本

根据以下顺序获取标签文本:

  1. 组件内使用 ReuseTabService.title = 'new title' 重新指定文本,
  2. 路由配置中 data 属性中包含 reuseTitle > title
  3. 菜单数据中 text 属性

ReuseTabService 代码示例:

export class DemoReuseTabEditComponent implements OnInit {
  id: any;

  constructor(private route: ActivatedRoute, private reuseTabService: ReuseTabService) {}

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      this.id = params.id;
      this.reuseTabService.title = `编辑 ${this.id}`;
    });
  }
}

生命周期

路由复用过程中不会触发现有任何生命周期钩子(例如:ngOnInit 等),但是往往需要在复用过程中刷新数据,因此 reuse-tab 提供了两种新生命周期钩子用于临时解决这类问题。

_onReuseInit()

当目前路由在复用过程中时触发。

_onReuseDestroy()

当目前路由允许复用且进入新路由时触发。

_ 开头希望未来 Angular 会有相应的钩子用于快速替换,一个简单的示例:

@Component()
export class DemoComponent {
  _onReuseInit() {
    console.log('_onReuseInit');
  }
  _onReuseDestroy() {
    console.log('_onReuseDestroy');
  }
}

常见问题

如何Debug?

路由复用会保留组件状态,这可能会带来另一个弊端;复用过程中组件的生命周期勾子不会重复触发,大部分情况下都能正常运行,但可能需要注意:

  • OnDestroy 可能会处理一些组件外部(例如:body)的样式等,可以参考生命周期解决。
  • 开启 debug 模式后会在 console 很多信息这有助于分析路由复用的过程。

API

ReuseTabService 接口

属性

参数说明类型默认值
[max]允许最多复用多少个页面number10
[mode]设置匹配模式ReuseTabMatchMode0
[debug]是否Debug模式booleanfalse
[excludes]排除规则,限 mode=URLRegExp[]-
[items]获取已缓存的路由ReuseTabCached[]-
[count]获取当前缓存的路由总数number-
[change]订阅缓存变更通知Observable<ReuseTabNotify>-
[title]自定义当前标题string-
[closable]自定义当前 closable 状态boolean-

方法

方法名说明返回类型
index(url)获取指定路径缓存所在位置,-1 表示无缓存number
exists(url)获取指定路径缓存是否存在boolean
get(url)获取指定路径缓存boolean
getTitle(url, route?: ActivatedRouteSnapshot)获取标题string
clearTitleCached()清空自定义标题数据void
getClosable(url, route?: ActivatedRouteSnapshot)获取 closable 状态string
clearClosableCached()清空 closable 缓存void
remove(url)根据URL移除标签,同时触 change remove事件void
move(url, position)移动缓存数据,同时触 change move事件void
clear()清除所有缓存,同时触 change clear事件void
refresh()无任何动作,但会触 change refresh事件void
replace(url)强制关闭当前路由(包含不可关闭状态),并重新导航至 newUrl 路由void

reuse-tab 组件

参数说明类型默认值
[mode]设置匹配模式ReuseTabMatchMode0
[debug]是否Debug模式booleanfalse
[max]允许最多复用多少个页面number10
[excludes]排除规则,限 mode=URLRegExp[]-
[allowClose]允许关闭booleantrue
[showCurrent]总是显示当前页booleantrue
[fixed]是否固定booleantrue
(close)关闭回调EventEmitter-
(change)切换时回调,接收的参数至少包含:activelist 两个参数EventEmitter-

此项目参考自: ng-alain

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free