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 样式 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |