d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Constructor, InputBoolean, MixinBase, mixinUnsubscribe, ThyUnsubscribe } from 'ngx-tethys/core';
import { takeUntil } from 'rxjs/operators';
import { useHostRenderer } from '@tethys/cdk/dom';
import {
    AfterViewInit,
    ContentChildren,
    Directive,
    ElementRef,
    forwardRef,
    Input,
    NgZone,
    OnDestroy,
    Optional,
    QueryList
} from '@angular/core';
import { RouterLinkActive } from '@angular/router';

export type ThyNavLink = '' | 'active';

const _MixinBase: Constructor<ThyUnsubscribe> & typeof MixinBase = mixinUnsubscribe(MixinBase);

/**
 * 导航项
 * @name thyNavItem
 * @order 20
 */
@Directive({
    selector: '[thyNavLink],[thyNavItem]',
    host: {
        class: 'thy-nav-item',
        '[class.active]': 'thyNavItemActive || thyNavLinkActive',
        '[class.disabled]': 'thyNavItemDisabled'
    },
    standalone: true
})
export class ThyNavItemDirective extends _MixinBase implements AfterViewInit, OnDestroy {
    /**
     * 是否激活状态
     * @default false
     */
    @Input()
    @InputBoolean()
    thyNavItemActive: boolean;

    /**
     * 已经废弃，请使用 thyNavItemActive
     * @deprecated please use thyNavItemActive
     * @default false
     */
    @Input()
    @InputBoolean()
    thyNavLinkActive: boolean;

    /**
     * 是否禁用
     * @default false
     */
    @Input()
    @InputBoolean()
    thyNavItemDisabled: boolean;

    /**
     * @private
     */
    @ContentChildren(forwardRef(() => ThyNavItemDirective), { descendants: true })
    links: QueryList<ThyNavItemDirective>;

    /**
     * @private
     */
    @ContentChildren(RouterLinkActive, { descendants: true }) routers: QueryList<RouterLinkActive>;

    // @HostBinding('attr.href') navLinkHref = 'javascript:;';

    public offset: {
        width: number;
        height: number;
        left: number;
        top: number;
    } = {
        width: 0,
        height: 0,
        left: 0,
        top: 0
    };

    public content: HTMLElement;

    public isActive: boolean;

    private hostRenderer = useHostRenderer();

    constructor(public elementRef: ElementRef, @Optional() private routerLinkActive: RouterLinkActive, private ngZone: NgZone) {
        super();
    }

    ngAfterViewInit() {
        this.setOffset();

        this.content = this.elementRef.nativeElement.outerHTML;

        this.ngZone.onStable.pipe(takeUntil(this.ngUnsubscribe$)).subscribe(() => {
            this.isActive = this.linkIsActive();
        });
    }

    setOffset() {
        this.offset = {
            width: this.elementRef.nativeElement.offsetWidth,
            height: this.elementRef.nativeElement.offsetHeight,
            left: this.elementRef.nativeElement.offsetLeft,
            top: this.elementRef.nativeElement.offsetTop
        };
    }

    linkIsActive() {
        return (
            this.thyNavItemActive ||
            this.thyNavLinkActive ||
            (this.routerLinkActive && this.routerLinkActive.isActive) ||
            this.routers.some(router => router.isActive) ||
            this.links.some(item => item.thyNavItemActive) ||
            this.links.some(item => item.thyNavLinkActive)
        );
    }

    setNavLinkHidden(value: boolean) {
        if (value) {
            this.hostRenderer.addClass('thy-nav-item-hidden');
        } else {
            this.hostRenderer.removeClass('thy-nav-item-hidden');
        }
    }

    ngOnDestroy() {
        this.ngUnsubscribe$.next();
        this.ngUnsubscribe$.complete();
    }
}

1	import { Constructor, InputBoolean, MixinBase, mixinUnsubscribe, ThyUnsubscribe } from 'ngx-tethys/core';
2	import { takeUntil } from 'rxjs/operators';
3	import { useHostRenderer } from '@tethys/cdk/dom';
4	import {
5	AfterViewInit,
6	ContentChildren,
7	Directive,
8	ElementRef,	1✔
9	forwardRef,
10	Input,
11	NgZone,
12	OnDestroy,
13	Optional,
14	QueryList	1✔
15	} from '@angular/core';
16	import { RouterLinkActive } from '@angular/router';	×
17		×
18	export type ThyNavLink = '' \| 'active';	×
19		×
20	const _MixinBase: Constructor<ThyUnsubscribe> & typeof MixinBase = mixinUnsubscribe(MixinBase);
21		×
22	/**
23	* 导航项
24	* @name thyNavItem
25	* @order 20
26	*/
27	@Directive({	×
28	selector: '[thyNavLink],[thyNavItem]',
29	host: {
30	class: 'thy-nav-item',	×
31	'[class.active]': 'thyNavItemActive \|\| thyNavLinkActive',	×
32	'[class.disabled]': 'thyNavItemDisabled'	×
33	},	×
34	standalone: true
35	})
36	export class ThyNavItemDirective extends _MixinBase implements AfterViewInit, OnDestroy {
37	/**	×
38	* 是否激活状态
39	* @default false
40	*/
41	@Input()
42	@InputBoolean()
43	thyNavItemActive: boolean;
44
45	/**	×
46	* 已经废弃，请使用 thyNavItemActive
47	* @deprecated please use thyNavItemActive
48	* @default false	×
49	*/	×
50	@Input()	×
51	@InputBoolean()
52	thyNavLinkActive: boolean;
53		×
54	/**	×
55	* 是否禁用
56	* @default false
57	*/	×
58	@Input()
59	@InputBoolean()
60	thyNavItemDisabled: boolean;
61		×
62	/**	×
63	* @private
64	*/	1✔
65	@ContentChildren(forwardRef(() => ThyNavItemDirective), { descendants: true })
66	links: QueryList<ThyNavItemDirective>;
67
68	/**
69	* @private	1✔
70	*/
71	@ContentChildren(RouterLinkActive, { descendants: true }) routers: QueryList<RouterLinkActive>;
72
73	// @HostBinding('attr.href') navLinkHref = 'javascript:;';	×
74
75	public offset: {
76	width: number;
77	height: number;	1✔
78	left: number;
79	top: number;
80	} = {
81	width: 0,	1✔
82	height: 0,
83	left: 0,
84	top: 0
85	};	1✔
86
87	public content: HTMLElement;
88
89	public isActive: boolean;	1✔
90
91	private hostRenderer = useHostRenderer();
92
93	constructor(public elementRef: ElementRef, @Optional() private routerLinkActive: RouterLinkActive, private ngZone: NgZone) {
94	super();
95	}
96
97	ngAfterViewInit() {
98	this.setOffset();
99
100	this.content = this.elementRef.nativeElement.outerHTML;
101
102	this.ngZone.onStable.pipe(takeUntil(this.ngUnsubscribe$)).subscribe(() => {
103	this.isActive = this.linkIsActive();
104	});
105	}
106
107	setOffset() {
108	this.offset = {
109	width: this.elementRef.nativeElement.offsetWidth,
110	height: this.elementRef.nativeElement.offsetHeight,
111	left: this.elementRef.nativeElement.offsetLeft,
112	top: this.elementRef.nativeElement.offsetTop
113	};
114	}
115
116	linkIsActive() {
117	return (
118	this.thyNavItemActive \|\|
119	this.thyNavLinkActive \|\|
120	(this.routerLinkActive && this.routerLinkActive.isActive) \|\|
121	this.routers.some(router => router.isActive) \|\|
122	this.links.some(item => item.thyNavItemActive) \|\|
123	this.links.some(item => item.thyNavLinkActive)
124	);
125	}
126
127	setNavLinkHidden(value: boolean) {
128	if (value) {
129	this.hostRenderer.addClass('thy-nav-item-hidden');
130	} else {
131	this.hostRenderer.removeClass('thy-nav-item-hidden');
132	}
133	}
134
135	ngOnDestroy() {
136	this.ngUnsubscribe$.next();
137	this.ngUnsubscribe$.complete();
138	}
139	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous