angular中路由的应用

动态路由替代方案

网页搜索(翻墙)没有找到关于ng2的动态路由的资料，尝试通过替代方案解决
html代码：

<nav class="app_nav">
        <div *ngFor="let item of currentUser?.frontSet;let last = last;" [isLast]="last" (lastDone)="initNav()">
            <a [routerLink]="item.code" [queryParams]="{userName : currentUser.name}" routerLinkActive='active'>
                  {{item.moduleName}}
            </a>
        </div>
    </nav>

directive监听ngfor结束事件:

import { Directive, Input, Output, EventEmitter, OnInit} from "@angular/core";

@Directive({
  selector : '[isLast]'
})

export class IsLastDirective implements OnInit {
  @Input() isLast: boolean;
  @Output() lastDone: EventEmitter<boolean> = new EventEmitter<boolean>();

  ngOnInit(): void {
    if (this.isLast) {
      this.lastDone.emit(true);
    }
  }
}

initNav方法

  initVav() {
    if (((location.href.substring(location.href.indexOf('#') + 1,
      location.href.length)).length === 1) || location.href.indexOf('code') > -1) {
      let url = this.currentUser.frontSet[0].code;
      let id = this.currentUser.frontSet[0].id;
      if (id === '1') {
        let navigationExtras: NavigationExtras = {
          queryParams: {
            userName: this.currentUser.name
          }, fragment: 'anchor'
        };
        this.router.navigate([url], navigationExtras);
      } else {
        this.router.navigate([url]);
      }
    }
  }

通过ts触发讲路由指向第一个

应用路由事件来做一些控制

参考：https://angular.cn/guide/router#路由事件
场景1：
angular项目是一个单页面的应用，我们需要控制每次切换路由都让滚动条回到顶部
解决办法是在跟组件中加入以下代码

private router: Router

this.router.events
        .filter(event => event instanceof NavigationEnd)
        .subscribe((event: NavigationEnd) => {
          document.body.scrollTop = 0;
        });

this.router.events返回的是一个obversable对象，event也分为很多种，我们过滤出NavigationEnd事件进行监听即可
场景2：
在父子路由中，子路由变了，希望父路由组件做一些处理，比如样式变化、页面布局或一些复杂交互

ngOnInit() {
        this.routeSubscribe = this.router.events
        .filter(event => event instanceof NavigationEnd)
        .subscribe((event: NavigationEnd) => {
            ...    // 业务代码
        });
    }

    ngOnDestroy() {
      this.routeSubscribe.unsubscribe();
    }

用一个变量接收，然后在OnDestroy中注销