d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Component, Input, Output, EventEmitter, ContentChild, TemplateRef, OnInit, Optional, ElementRef } from '@angular/core';
import { ThyDialog } from '../dialog.service';
import { ThyDialogContainerComponent } from '../dialog-container.component';
import { InputBoolean, ThyTranslate } from 'ngx-tethys/core';
import { ThyInternalDialogRef } from '../dialog-ref';
import { ThyActionComponent } from 'ngx-tethys/action';
import { ThyIconComponent } from 'ngx-tethys/icon';
import { NgIf, NgTemplateOutlet } from '@angular/common';

/**
 * 模态框头部组件
 * @name thy-dialog-header
 * @order 40
 */
@Component({
    selector: 'thy-dialog-header',
    templateUrl: './dialog-header.component.html',
    // changeDetection: ChangeDetectionStrategy.OnPush,
    exportAs: 'thyDialogHeader',
    host: {
        class: 'dialog-header thy-dialog-header',
        '[class.thy-dialog-header-lg]': `thySize === 'lg'`,
        '[class.thy-dialog-header-divided]': `thyDivided`
    },
    standalone: true,
    imports: [NgIf, NgTemplateOutlet, ThyIconComponent, ThyActionComponent]
})
export class DialogHeaderComponent implements OnInit {
    /**
     * 自定义头部模板
     */
    @ContentChild('dialogHeader')
    public headerTemplate: TemplateRef<any>;

    /**
     * 标题
     */
    @Input() thyTitle: string;

    /**
     * 大小，只有大的详情页场景会使用 lg，左右 padding 缩小至 20px
     * @type lg | md
     * @default md
     */
    @Input() thySize: 'lg' | 'md';

    /**
     * 是否显示分割线
     * @default false
     */
    @Input() @InputBoolean() thyDivided: boolean;

    /**
     * 标题的多语言 Key
     */
    @Input()
    set thyTitleTranslationKey(key: string) {
        if (key && !this.thyTitle) {
            this.thyTitle = this.translate.instant(key);
        }
    }

    /**
     * 头部图标
     */
    @Input() thyIcon: string;

    /**
     * 关闭事件
     */
    @Output() thyOnClose: EventEmitter<Event> = new EventEmitter<Event>();

    constructor(
        private elementRef: ElementRef,
        private dialog: ThyDialog,
        private translate: ThyTranslate,
        @Optional() private dialogContainer: ThyDialogContainerComponent
    ) {}

    ngOnInit() {
        if (!this.dialogContainer) {
            // When this directive is included in a dialog via TemplateRef (rather than being
            // in a Component), the ThyDialogContainerComponent isn't available via injection because embedded
            // views cannot be given a custom injector. Instead, we look up the ThyDialogContainerComponent by
            // ID. This must occur in `onInit`, as the ID binding for the dialog container won't
            // be resolved at constructor time.
            const dialogRef = this.dialog.getClosestDialog(this.elementRef.nativeElement) as ThyInternalDialogRef<any>;
            this.dialogContainer = dialogRef ? dialogRef.containerInstance : null;
        }

        // change in next microtask avoid throw ExpressionChangedAfterItHasBeenCheckedError
        // because sub component change parent's HostBinding property (ariaLabelledBy)
        Promise.resolve().then(() => {
            if (this.dialogContainer) {
                this.dialogContainer.ariaLabelledBy = this.thyTitle;
            }
        });
    }

    close(event?: Event) {
        if (this.thyOnClose.observers.length > 0) {
            this.thyOnClose.emit(event);
        } else {
            this.dialog.close();
        }
    }
}

1	import { Component, Input, Output, EventEmitter, ContentChild, TemplateRef, OnInit, Optional, ElementRef } from '@angular/core';
2	import { ThyDialog } from '../dialog.service';
3	import { ThyDialogContainerComponent } from '../dialog-container.component';
4	import { InputBoolean, ThyTranslate } from 'ngx-tethys/core';
5	import { ThyInternalDialogRef } from '../dialog-ref';
6	import { ThyActionComponent } from 'ngx-tethys/action';
7	import { ThyIconComponent } from 'ngx-tethys/icon';
8	import { NgIf, NgTemplateOutlet } from '@angular/common';
9
10	/**
11	* 模态框头部组件
12	* @name thy-dialog-header
13	* @order 40
14	*/
15	@Component({	1✔
16	selector: 'thy-dialog-header',
17	templateUrl: './dialog-header.component.html',	×
18	// changeDetection: ChangeDetectionStrategy.OnPush,	×
19	exportAs: 'thyDialogHeader',
20	host: {
21	class: 'dialog-header thy-dialog-header',
22	'[class.thy-dialog-header-lg]': `thySize === 'lg'`,	×
23	'[class.thy-dialog-header-divided]': `thyDivided`	×
24	},	×
25	standalone: true,	×
26	imports: [NgIf, NgTemplateOutlet, ThyIconComponent, ThyActionComponent]	×
27	})
28	export class DialogHeaderComponent implements OnInit {
29	/**	×
30	* 自定义头部模板
31	*/
32	@ContentChild('dialogHeader')
33	public headerTemplate: TemplateRef<any>;
34
35	/**	×
36	* 标题	×
37	*/
38	@Input() thyTitle: string;
39
40	/**	×
41	* 大小，只有大的详情页场景会使用 lg，左右 padding 缩小至 20px	×
42	* @type lg \| md	×
43	* @default md
44	*/
45	@Input() thySize: 'lg' \| 'md';
46
47	/**	×
48	* 是否显示分割线	×
49	* @default false
50	*/
51	@Input() @InputBoolean() thyDivided: boolean;	×
52
53	/**
54	* 标题的多语言 Key	1✔
55	*/
56	@Input()
57	set thyTitleTranslationKey(key: string) {
58	if (key && !this.thyTitle) {
59	this.thyTitle = this.translate.instant(key);
60	}	1✔
61	}
62
63	/**
64	* 头部图标
65	*/
66	@Input() thyIcon: string;
67
68	/**
69	* 关闭事件
70	*/	1✔
71	@Output() thyOnClose: EventEmitter<Event> = new EventEmitter<Event>();
72
73	constructor(
74	private elementRef: ElementRef,	1✔
75	private dialog: ThyDialog,
76	private translate: ThyTranslate,
77	@Optional() private dialogContainer: ThyDialogContainerComponent
78	) {}
79
80	ngOnInit() {
81	if (!this.dialogContainer) {
82	// When this directive is included in a dialog via TemplateRef (rather than being
83	// in a Component), the ThyDialogContainerComponent isn't available via injection because embedded
84	// views cannot be given a custom injector. Instead, we look up the ThyDialogContainerComponent by
85	// ID. This must occur in `onInit`, as the ID binding for the dialog container won't
86	// be resolved at constructor time.
87	const dialogRef = this.dialog.getClosestDialog(this.elementRef.nativeElement) as ThyInternalDialogRef<any>;
88	this.dialogContainer = dialogRef ? dialogRef.containerInstance : null;
89	}
90
91	// change in next microtask avoid throw ExpressionChangedAfterItHasBeenCheckedError
92	// because sub component change parent's HostBinding property (ariaLabelledBy)
93	Promise.resolve().then(() => {
94	if (this.dialogContainer) {
95	this.dialogContainer.ariaLabelledBy = this.thyTitle;
96	}
97	});
98	}
99
100	close(event?: Event) {
101	if (this.thyOnClose.observers.length > 0) {
102	this.thyOnClose.emit(event);
103	} else {
104	this.dialog.close();
105	}
106	}
107	}

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