d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, Optional } from '@angular/core';
import { ThyInputDirective } from './input.directive';
import { mixinUnsubscribe, MixinBase } from 'ngx-tethys/core';
import { takeUntil, switchMap, filter, tap } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { ThyInputGroupComponent } from './input-group.component';

const _Base = mixinUnsubscribe(MixinBase);

/**
 * 输入框输入文字展示
 * @name thy-input-count
 * @order 40
 */
@Component({
    selector: 'thy-input-count',
    template: '{{inputLength}} / {{maxLength}}',
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        class: 'text-muted'
    },
    standalone: true
})
export class ThyInputCountComponent extends _Base implements OnInit {
    private hasInput = false;

    /**
     * 输入框组件，如果不传默认会读取外层 thy-input-group 下的 thyInput 指令
     * @type ThyInputDirective
     */
    @Input() set thyInput(value: ThyInputDirective) {
        this.hasInput = true;
        this.thyInput$.next(value);
    }

    maxLength: number | string;

    inputLength = 0;

    thyInput$ = new Subject<ThyInputDirective>();

    constructor(private changeDetectorRef: ChangeDetectorRef, @Optional() private inputGroup: ThyInputGroupComponent) {
        super();
        this.setup();
    }

    setup() {
        this.thyInput$
            .pipe(
                filter(input => {
                    return !!input;
                }),
                tap(input => {
                    this.maxLength = input.nativeElement.getAttribute('maxlength');
                    this.changeDetectorRef.markForCheck();
                }),
                takeUntil(this.ngUnsubscribe$),
                switchMap(input => {
                    return input.ngControl.valueChanges;
                }),
                tap(value => {
                    this.inputLength = value?.length || 0;
                    this.changeDetectorRef.markForCheck();
                }),
                takeUntil(this.ngUnsubscribe$)
            )
            .subscribe();
    }

    ngOnInit(): void {
        if (!this.hasInput && this.inputGroup && this.inputGroup.inputDirective) {
            this.thyInput$.next(this.inputGroup.inputDirective);
        }
    }
}

1	import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, Optional } from '@angular/core';
2	import { ThyInputDirective } from './input.directive';
3	import { mixinUnsubscribe, MixinBase } from 'ngx-tethys/core';
4	import { takeUntil, switchMap, filter, tap } from 'rxjs/operators';
5	import { Subject } from 'rxjs';
6	import { ThyInputGroupComponent } from './input-group.component';
7
8	const _Base = mixinUnsubscribe(MixinBase);	1✔
9
10	/**
11	* 输入框输入文字展示
12	* @name thy-input-count
13	* @order 40
14	*/	1✔
15	@Component({
16	selector: 'thy-input-count',	×
17	template: '{{inputLength}} / {{maxLength}}',	×
18	changeDetection: ChangeDetectionStrategy.OnPush,
19	host: {
20	class: 'text-muted'	×
21	},	×
22	standalone: true	×
23	})	×
24	export class ThyInputCountComponent extends _Base implements OnInit {	×
25	private hasInput = false;	×
26		×
27	/**
28	* 输入框组件，如果不传默认会读取外层 thy-input-group 下的 thyInput 指令
29	* @type ThyInputDirective	×
30	*/
31	@Input() set thyInput(value: ThyInputDirective) {	×
32	this.hasInput = true;
33	this.thyInput$.next(value);	×
34	}	×
35
36	maxLength: number \| string;	×
37
38	inputLength = 0;	×
39		×
40	thyInput$ = new Subject<ThyInputDirective>();
41
42	constructor(private changeDetectorRef: ChangeDetectorRef, @Optional() private inputGroup: ThyInputGroupComponent) {
43	super();
44	this.setup();	×
45	}	×
46
47	setup() {
48	this.thyInput$	1✔
49	.pipe(
50	filter(input => {
51	return !!input;
52	}),	1✔
53	tap(input => {
54	this.maxLength = input.nativeElement.getAttribute('maxlength');
55	this.changeDetectorRef.markForCheck();
56	}),	1✔
57	takeUntil(this.ngUnsubscribe$),
58	switchMap(input => {
59	return input.ngControl.valueChanges;
60	}),
61	tap(value => {
62	this.inputLength = value?.length \|\| 0;
63	this.changeDetectorRef.markForCheck();
64	}),
65	takeUntil(this.ngUnsubscribe$)
66	)
67	.subscribe();
68	}
69
70	ngOnInit(): void {
71	if (!this.hasInput && this.inputGroup && this.inputGroup.inputDirective) {
72	this.thyInput$.next(this.inputGroup.inputDirective);
73	}
74	}
75	}

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