首页 > 其他 > 详细

angular 源码 <一> rotuerLinkActive

时间:2019-10-20 21:01:00      阅读:52      评论:0      收藏:0      [点我收藏+]

这几篇,查看angular 源码

rotuerLinkActive 是路由的样式设置。

它的值是 css 的一个类。或者几个类。

主要代码如下

@Input()
  set routerLinkActive(data: string[]|string) {
    const classes = Array.isArray(data) ? data : data.split(‘ ‘);
    this.classes = classes.filter(c => !!c);
  }

  ngOnChanges(changes: SimpleChanges): void { this.update(); }
  ngOnDestroy(): void { this.subscription.unsubscribe(); }

  private update(): void {
    if (!this.links || !this.linksWithHrefs || !this.router.navigated) return;
    Promise.resolve().then(() => {
      const hasActiveLinks = this.hasActiveLinks();
      if (this.isActive !== hasActiveLinks) {
        (this as any).isActive = hasActiveLinks;
        this.classes.forEach((c) => {
          if (hasActiveLinks) {
            this.renderer.addClass(this.element.nativeElement, c);
          } else {
            this.renderer.removeClass(this.element.nativeElement, c);
          }
        });
      }
    });
  }
this.classes就是传进来的数组,当变化或初始化的时候,执行update. update 遍历class ,并render 样式
源码

 

angular 源码 <一> rotuerLinkActive

原文:https://www.cnblogs.com/qgbo/p/11708248.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!