加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular 源码 <一> rotuerLinkActive

发布时间:2020-12-17 07:05:54 所属栏目:安全 来源:网络整理
导读:这几篇,查看angular 源码。 rotuerLinkActive 是路由的样式设置。 它的值是 css 的一个类。或者几个类。 主要代码如下 @Input() set routerLinkActive(data: string[] | string) { const classes = Array.isArray(data) ? data : data.split(‘ ‘ ); this

这几篇,查看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 样式
源码

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读