该项目需要一个结构性指令,根据条件改变它被抛出的元素的状态。
我将向您展示一个简单的 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
上,但这不会发生:
选择结构指令是有原因的,需要额外的处理逻辑,所以将结构指令更改为属性指令的方法不合适