主页 / 问题 / 1309070
Accepted
eriksongerson
Asked:2022-07-26 22:11:44 +0000 UTC2022-07-26 22:11:44 +0000 UTC

带有 HostBinding 的 Angular 结构指令

  • 772

该项目需要一个结构性指令，根据条件改变它被抛出的元素的状态。

我将向您展示一个简单的 shimmer 指令的示例：

@Directive({
    selector: '[shimmer]'
})
export class ShimmerDirective {

    private _shimmer = false;

    @HostBinding('class.shimmer')
    public get shimmerBinding(): boolean {
        return this._shimmer;
    }

    @Input()
    public set shimmer(value: boolean ) {
        this._shimmer = value;
    }

    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef
    ) {
        this.viewContainer.createEmbeddedView(this.templateRef);
    }
}

我像这样使用这个指令：

<button (click)="loading=!loading">
    переключить
</button>
{{ loading }}
<p *shimmer="loading">проверка шиммера</p>

理论上，点击“切换”按钮后，p该类应该附加到元素shimmer上，但这不会发生：

指示活动状态

在此处输入图像描述

选择结构指令是有原因的，需要额外的处理逻辑，所以将结构指令更改为属性指令的方法不合适

angular

1 个回答

  1. Best Answer

    任何结构指令都只是 masqueraded ng-template，这意味着您的标记等同于：

    <button (click)="loading=!loading">
    переключить
</button>
{{ loading }}
<ng-template [shimmer]="loading">
    <p>проверка шиммера</p>
</ng-template>

    很容易看出，这里的任何主机绑定都将应用于ng-template，而不是应用于“挂起”结构指令的元素。

    现在在这种情况下应该做什么。您需要保存 ViewRef 并通过 Renderer2 将类直接添加到 rootNodes：

        private viewRef: EmbeddedViewRef;

    constructor(
        templateRef: TemplateRef<any>,
        viewContainer: ViewContainerRef,
        private renderer: Renderer2,
    ) {
        this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
    }

    @Input()
    public set shimmer(value: boolean ) {
        this._shimmer = value;
        
        for (const node of this.viewRef.rootNodes) {
            if (value) {
                this.renderer.addClass(node, 'shimmer');
            } else {
                this.renderer.removeClass(node, 'shimmer');
            }
        }
    }

    不过，请考虑使您的指令正常而不是结构。请记住，即使是常规指令也可以通过 ElementRef 访问挂起它的元素。

    • 2

相关问题