在结构指令中创建标签

Question

我想实现一个延迟加载指令，该指令仅在图像（或其他任何图像）出现时才加载。通常，该名称为simple，但我想保留语义并支持无JavaScript浏览器（可以在Angular Universal中使用）。

为此，我将在图像不在视图中时使用<noscript><img src="..."></noscript>，在图像进入视图时（将父<img src="...">剥离）使用<noscript>。

我希望我的指令像这样工作：<img src="..." lazyLoad>。

我有执行显示状态的代码（createEmbeddedView()并通过模板），但是我要解决的问题是如何创建<noscript>标签。

到目前为止，这是我的代码：

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;
        }
    }
}

我知道如何使用组件执行此操作，但是为了简单起见，我更喜欢使用structural directive进行操作。