Angular 在结构指令中创建标记

我想实现一个延迟加载指令，该指令只在图像（或者其他任何东西）进入视图时加载它们。通常情况下，这是可能的，但我希望保持语义，不支持JavaScript浏览器（Angular Universal可能支持）

要做到这一点，我将在图像不在视图中时使用

，并且在图像进入视图后使用

（剥离父级

）

我希望我的指令是这样工作的：

我有代码来执行显示状态（

createEmbeddedView（）

并传递模板），但我试图解决的问题是如何创建

标记

以下是我目前的代码：

import {Directive, OnInit, TemplateRef, ViewContainerRef} from "@angular/core";

@Directive({selector: "[lazyLoad]"})
export class LazyLoadDirective implements OnInit {
    constructor(
            private templateRef: TemplateRef<any>,
            private viewContainer: ViewContainerRef,) {
    }

    ngOnInit(): void {
        // not shown: create IntersectionObserver and call show() as appropriate
    }

    showing = true;

    private show(show: boolean) {
        if (show && !this.showing) {
            // show the content image
            this.viewContainer.clear();
            this.viewContainer.createEmbeddedView(this.templateRef);
            this.showing = true;
        } else if (!show && this.showing) {
            // TODO: <noscript><ng-content></ng-content></noscript>
            // maybe something with createComponent()?
            // ...then call createEmbeddedView() on the created component?
            this.showing = false;
        }
    }
}

import{Directive，OnInit，TemplateRef，ViewContainerRef}来自“@angular/core”；
@指令（{选择器：“[lazyLoad]”}）
导出类LazyLoadDirective实现OnInit{
建造师(
私有templateRef:templateRef用于简化