美文网首页
angular中路由的应用

angular中路由的应用

作者: 琢磨先生lf | 来源:发表于2016-12-23 01:50 被阅读250次

    动态路由替代方案

    网页搜索(翻墙)没有找到关于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中注销

    相关文章

      网友评论

          本文标题:angular中路由的应用

          本文链接:https://www.haomeiwen.com/subject/qaahvttx.html