Angular7多标签页实现(路由复用+路由懒加载)

1.在app.component.ts文件定义变量

  // 路由列表
    tagsList: Array<{ title: string, path: string, permission: string, show: boolean, componentName: string, isSelect: boolean }> = [];

并在ngOnInit方法中加入以下代码

this.router.events
            .pipe(
                filter(event => event instanceof NavigationEnd),  // 筛选原始的Observable：this.router.events
                map(() => this.activatedRoute),
                map(route => {
                    while (route.firstChild) {
                        route = route.firstChild;
                    }
                    return route;
                }),
                mergeMap(route => route.data)
            )
            .subscribe((data) => {
                const url = this.router.url;
                const isLogin = StorageUtil.getItem(StorageUtil.storageKey.isLogin);
                // 未登录/会话过期或者是404,403等错误页面，删除全部页面的路由缓存，并且清空标签列表
                if (!isLogin || isLogin === 'false' || url.indexOf('/common/errors') >=0) {
                    SimpleReuseStrategy.deleteAllRouteSnapshot();
                    this.tagsList = [];
                } else {
                    // 路由data的标题
                    let title = data['title'];
                    const path = data['path'];
                    // 路径参数
                    const param = this.router['browserUrlTree'] && this.router['browserUrlTree'].queryParams ? this.router['browserUrlTree'].queryParams : {};
                    // 设置tags标题
                    if(param && param['taskId']){
                        if(url.indexOf('/task/taskDetail') >= 0){
                            title = (param['clientName'] ? param['clientName'] : title) + '[' + param['taskId'] + ']'
                        } else if(param && param['isUpdateTime'] && url.indexOf('/task/analysisPerson') >= 0){
                            title = '耗时修改' + '[' + param['taskId'] + ']'
                        } else{
                            title = title + '[' + param['taskId'] + ']'
                        }
                    }

                    // 关闭指定页面
                    let colsePage = '';
                    if(window['colsePage']){
                        colsePage = window['colsePage']
                    }
                    this.tagsList = this.tagsList.filter(p => {
                        if (p.path && p.path === url) {
                            p.isSelect = true;
                        }else{
                            p.isSelect = false;
                        }
                        if(colsePage == p.path){
                            // 删除指定关闭页面的路由缓存
                            let colsePath = colsePage.replace(/\//g, '_') + '_' + p.componentName;
                            SimpleReuseStrategy.deleteRouteSnapshot(colsePath);
                            return false;
                        }else {
                            return true;
                        }
                    });
                    window['colsePage'] = '';

                    const menu = {
                        title: title,
                        path: url,
                        permission: data['permission'],
                        show: data['show'],
                        componentName: data['componentName'] ? data['componentName'] : '',
                        isSelect: true
                    };
                    this.titleService.setTitle(title);
                    const exitMenu = this.tagsList.find(info => info.path === url);
                    if (exitMenu) { // 如果存在不添加，当前表示选中
                        this.tagsList.forEach(p => p.isSelect = p.path === url);
                        return;
                    }
                    if (exitMenu) { // 如果存在不添加，当前表示选中
                        return;
                    }
                    if (menu.show) {
                        this.tagsList.push(menu);
                    }
                }
            });

2.重写angular路由复用策略

import {
    RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle,
    Route
} from '@angular/router';

/**
 * 重写angular路由重用策略，路由重用（多标签页实现）和路由懒加载最终解决方案
 */
export class SimpleReuseStrategy implements RouteReuseStrategy {

    public static handlers: { [key: string]: DetachedRouteHandle } = {};

    private static waitDelete: string;

    /** 表示对所有路由允许复用，返回true，说明允许复用， 如果你有路由不想利用可以在这加一些业务逻辑判断 */
    public shouldDetach(route: ActivatedRouteSnapshot): boolean {
        //Avoid second call to getter(避免第二次调用getter)
        let config: Route = route.routeConfig && route.data['keepAlive'];
        //Don't store lazy loaded routes(不存储延迟加载的路由)
        return config && !config.loadChildren;
    }

    /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */
    public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        if (SimpleReuseStrategy.waitDelete && SimpleReuseStrategy.waitDelete == this.getRouteUrl(route)) {
            //如果待删除是当前路由则不存储快照
            SimpleReuseStrategy.waitDelete = null;
            return;
        }
        SimpleReuseStrategy.handlers[this.getRouteUrl(route)] = handle;

        /*
          This is where we circumvent the error.
          Detached route includes nested routes, which causes error when parent route does not include the same nested routes
          To prevent this, whenever a parent route is stored, we change/add a redirect route to the current child route
          (这是我们规避错误的地方。
          分离的路由包括嵌套路由，当父路由不包含相同的嵌套路由时会导致错误
          为了防止这种情况，无论何时存储父路由，我们都会将重定向路由更改/添加到当前子路由)
        */
        let config: Route = route.routeConfig;
        if(config) {
            let childRoute: ActivatedRouteSnapshot = route.firstChild;
            let futureRedirectTo = childRoute ? childRoute.url.map(function(urlSegment) {
                return urlSegment.path;
            }).join('/') : '';
            let childRouteConfigs: Route[] = config.children;
            if(childRouteConfigs) {
                let redirectConfigIndex: number;
                let redirectConfig: Route = childRouteConfigs.find(function(childRouteConfig, index) {
                    if(childRouteConfig.path === '' && !!childRouteConfig.redirectTo) {
                        redirectConfigIndex = index;
                        return true;
                    }
                    return false;
                });
                //Redirect route exists(重定向路由存在)
                if(redirectConfig) {
                    if(futureRedirectTo !== '') {
                        //Current activated route has child routes, update redirectTo(当前激活的路由有子路由，更新redirectTo )
                        redirectConfig.redirectTo = futureRedirectTo;
                    } else {
                        //Current activated route has no child routes, remove the redirect (otherwise retrieval will always fail for this route)（当前激活的路由没有子路由，删除重定向（否则此路由的检索将始终失败））
                        childRouteConfigs.splice(redirectConfigIndex, 1);
                    }
                } else if(futureRedirectTo !== '') {
                    childRouteConfigs.push({
                        path: '',
                        redirectTo: futureRedirectTo,
                        pathMatch: 'full'
                    });
                }
            }
        }
    }

    /** 若 path 在缓存中有的都认为允许还原路由 */
    public shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return !!SimpleReuseStrategy.handlers[this.getRouteUrl(route)]
    }

    /** 从缓存中获取快照，若无则返回nul */
    public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        let config: Route = route.routeConfig;
        //We don't store lazy loaded routes, so don't even bother trying to retrieve them（我们不会存储懒加载路线，所以甚至不试图检索他们）
        if(!config || config.loadChildren) {
            return false;
        }

        return SimpleReuseStrategy.handlers[this.getRouteUrl(route)]
    }

    /** 进入路由触发，判断是否同一路由 */
    public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        let isReUsed = future.routeConfig===curr.routeConfig &&
            JSON.stringify(future.params)==JSON.stringify(curr.params);
        // 如果路由未来路由url（即要跳转的路由url）和当前路由url（即要离开的路由url）一致，返回false
        if(isReUsed && future &&  future.routeConfig && curr && curr.routeConfig &&  future.routeConfig.data['path']  && future.routeConfig.data['path'] == curr.routeConfig.data['path']){
           isReUsed = false
        }
        return isReUsed;
    }

    /** 根据路由url并加以处理 **/
    private getRouteUrl(route: ActivatedRouteSnapshot) {
        // todo 因为环境中使用了路由懒加载，返回路径最好带上组件名，防止路由报错->（Cannot reattach ActivatedRouteSnapshot created from a different route）
        // 这句代码可以获取当前路由的组件名componentName，但生成环境（打包）将组建名缩写成随机单个字母，所以需要手动通过route.routeConfig.data['componentName']去获取在路由上自定义的组件名
        let componentShortName = (route.routeConfig.loadChildren || route.routeConfig.component.toString().split('(')[0].split(' ')[1] );
        if(route.routeConfig.data && route.routeConfig.data['componentName']){
            componentShortName = route.routeConfig.data['componentName'];
        }
        return route['_routerState'].url.replace(/\//g, '_')
            + '_' + componentShortName;
    }

    /** 根据路由缓存key，删除快照 **/
    public static deleteRouteSnapshot(name: string): void {
        if (SimpleReuseStrategy.handlers[name]) {
            delete SimpleReuseStrategy.handlers[name];
        } else {
            SimpleReuseStrategy.waitDelete = name;
        }
    }

    /** 删除全部快照 **/
    public static deleteAllRouteSnapshot(): void {
        SimpleReuseStrategy.handlers = {}
    }
}

3.在app.module.ts文件中加入路由复用策略类SimpleReuseStrategy
4.自定义tags组件，通过@input获取父组件的tagsList属性。更改tagsList属性后，通过@output向父组件传递tagsList数据

tags组件ts关键代码

    /**
     * 关闭当前标签页
     * @param index
     */
    closeTags(index) {
        const delItem = this.tagsList.splice(index, 1)[0];
        const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
        if (item) {
            if (delItem.path === this.router.url) {
                this.router.navigateByUrl(item.path);
            }
            // 删除复用
            let path = delItem.path.replace(/\//g, '_') + '_' +  delItem.componentName;
            SimpleReuseStrategy.deleteRouteSnapshot(path);
        } else {
            this.router.navigateByUrl('/user/person');
        }
        // 通过emit将信息发射出去
        this.tagsEvent.emit(this.tagsList);
    }

    /**
     * 关闭其他标签
     */
    closeOther(){
        this.router.navigateByUrl(this.router.url);
        const curItem = this.tagsList.filter(item => {
            if(item.path === this.router.url){
                return true;
            }else{
                // 删除复用
                let path = item.path.replace(/\//g, '_') + '_' +  item.componentName;
                SimpleReuseStrategy.deleteRouteSnapshot(path);
                return false;
            }
            return item.path === this.router.url;
        });
        this.tagsList = curItem;
        // 通过emit将信息发射出去
        this.tagsEvent.emit(this.tagsList);
    }

    /**
     * 关闭全部标签
     */
    closeAll(){
        const curItem = this.tagsList.filter(item => {
            // 删除复用
            let path = item.path.replace(/\//g, '_')+ '_' +  item.componentName;
            SimpleReuseStrategy.deleteRouteSnapshot(path);
        });
        this.tagsList = [];
        // 通过emit将信息发射出去
        this.tagsEvent.emit(this.tagsList);
        this.router.navigateByUrl('/user/person');
    }

5.最终实现效果图如下：