d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    ComponentRef,
    Directive,
    Input,
    ChangeDetectorRef,
    EmbeddedViewRef,
    OnChanges,
    SimpleChanges,
    Type,
    ViewContainerRef,
    TemplateRef,
    KeyValueDiffer,
    KeyValueDiffers
} from '@angular/core';
import { SafeAny } from 'ngx-tethys/types';

/**
 * 视图 Outlet 组件，取代 NgComponentOutlet 和 NgTemplateOutlet
 * @name thyViewOutlet
 * @order 10
 */
@Directive({
    selector: '[thyViewOutlet]',
    standalone: true
})
export class ThyViewOutletDirective implements OnChanges {
    private componentRef: ComponentRef<SafeAny> | undefined;

    private embeddedViewRef: EmbeddedViewRef<SafeAny> | undefined;

    /**
     * 组件或者模板 TemplateRef
     */
    @Input() thyViewOutlet: Type<SafeAny> | TemplateRef<SafeAny> | null = null;

    /**
     * 组件和模板上下文传递数据
     */
    @Input() thyViewOutletContext?: SafeAny;

    private keyValueDiffer: KeyValueDiffer<SafeAny, SafeAny>;

    constructor(private viewContainerRef: ViewContainerRef, private keyValueDiffers: KeyValueDiffers) {}

    ngOnChanges(changes: SimpleChanges) {
        const { viewContainerRef: viewContainerRef } = this;
        if (changes['thyViewOutlet']) {
            viewContainerRef.clear();
            this.componentRef = undefined;
            this.embeddedViewRef = undefined;

            if (this.thyViewOutlet) {
                if (this.thyViewOutlet instanceof TemplateRef) {
                    this.embeddedViewRef = viewContainerRef.createEmbeddedView(this.thyViewOutlet, this.thyViewOutletContext);
                } else {
                    this.componentRef = viewContainerRef.createComponent(this.thyViewOutlet, {
                        index: viewContainerRef.length
                    });
                }
            }
        }

        if (changes['thyViewOutletContext']) {
            let updatedKeys: string[] = [];
            if (changes['thyViewOutletContext'].isFirstChange()) {
                this.keyValueDiffer = this.keyValueDiffers.find(this.thyViewOutletContext).create();
                this.keyValueDiffer.diff(this.thyViewOutletContext);
                updatedKeys = Object.keys(this.thyViewOutletContext);
            } else {
                const diffChanges = this.keyValueDiffer.diff(this.thyViewOutletContext);
                diffChanges?.forEachChangedItem(item => {
                    updatedKeys.push(item.key);
                });
            }
            if (this.componentRef) {
                this.updateContext(this.componentRef.instance, updatedKeys);
                this.componentRef.injector.get(ChangeDetectorRef).markForCheck();
            } else if (this.embeddedViewRef) {
                this.updateContext(this.embeddedViewRef.context, updatedKeys);
                this.embeddedViewRef.markForCheck();
            }
        }
    }

    private updateContext(context: SafeAny, updatedKeys: string[]) {
        updatedKeys.forEach(key => {
            context[key] = this.thyViewOutletContext[key];
        });
    }
}

1	import {
2	ComponentRef,
3	Directive,
4	Input,
5	ChangeDetectorRef,
6	EmbeddedViewRef,
7	OnChanges,
8	SimpleChanges,	1✔
9	Type,
10	ViewContainerRef,	×
11	TemplateRef,	×
12	KeyValueDiffer,	×
13	KeyValueDiffers
14	} from '@angular/core';
15	import { SafeAny } from 'ngx-tethys/types';	×
16		×
17	/**	×
18	* 视图 Outlet 组件，取代 NgComponentOutlet 和 NgTemplateOutlet	×
19	* @name thyViewOutlet	×
20	* @order 10	×
21	*/	×
22	@Directive({	×
23	selector: '[thyViewOutlet]',
24	standalone: true
25	})	×
26	export class ThyViewOutletDirective implements OnChanges {
27	private componentRef: ComponentRef<SafeAny> \| undefined;
28
29	private embeddedViewRef: EmbeddedViewRef<SafeAny> \| undefined;
30
31	/**	×
32	* 组件或者模板 TemplateRef	×
33	*/	×
34	@Input() thyViewOutlet: Type<SafeAny> \| TemplateRef<SafeAny> \| null = null;	×
35		×
36	/**	×
37	* 组件和模板上下文传递数据
38	*/
39	@Input() thyViewOutletContext?: SafeAny;	×
40		×
41	private keyValueDiffer: KeyValueDiffer<SafeAny, SafeAny>;	×
42
43	constructor(private viewContainerRef: ViewContainerRef, private keyValueDiffers: KeyValueDiffers) {}
44		×
45	ngOnChanges(changes: SimpleChanges) {	×
46	const { viewContainerRef: viewContainerRef } = this;	×
47	if (changes['thyViewOutlet']) {
48	viewContainerRef.clear();	×
49	this.componentRef = undefined;	×
50	this.embeddedViewRef = undefined;	×
51
52	if (this.thyViewOutlet) {
53	if (this.thyViewOutlet instanceof TemplateRef) {
54	this.embeddedViewRef = viewContainerRef.createEmbeddedView(this.thyViewOutlet, this.thyViewOutletContext);
55	} else {	×
56	this.componentRef = viewContainerRef.createComponent(this.thyViewOutlet, {	×
57	index: viewContainerRef.length
58	});
59	}	1✔
60	}
61	}
62
63	if (changes['thyViewOutletContext']) {	1✔
64	let updatedKeys: string[] = [];
65	if (changes['thyViewOutletContext'].isFirstChange()) {
66	this.keyValueDiffer = this.keyValueDiffers.find(this.thyViewOutletContext).create();
67	this.keyValueDiffer.diff(this.thyViewOutletContext);
68	updatedKeys = Object.keys(this.thyViewOutletContext);	1✔
69	} else {
70	const diffChanges = this.keyValueDiffer.diff(this.thyViewOutletContext);
71	diffChanges?.forEachChangedItem(item => {
72	updatedKeys.push(item.key);
73	});
74	}
75	if (this.componentRef) {
76	this.updateContext(this.componentRef.instance, updatedKeys);
77	this.componentRef.injector.get(ChangeDetectorRef).markForCheck();
78	} else if (this.embeddedViewRef) {
79	this.updateContext(this.embeddedViewRef.context, updatedKeys);
80	this.embeddedViewRef.markForCheck();
81	}
82	}
83	}
84
85	private updateContext(context: SafeAny, updatedKeys: string[]) {
86	updatedKeys.forEach(key => {
87	context[key] = this.thyViewOutletContext[key];
88	});
89	}
90	}

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