在Angular中,可以使用ng-content
指令来在自定义指令中保留动态内容。
以下是一个示例代码,展示了如何在自定义指令中使用ng-content
来保留动态内容:
ng-content
来保留动态内容。import { Directive, ElementRef, Renderer2 } from '@angular/core';
@Directive({
selector: '[appDynamicContent]'
})
export class DynamicContentDirective {
constructor(private el: ElementRef, private renderer: Renderer2) { }
ngAfterViewInit() {
const dynamicContent = this.el.nativeElement.innerHTML;
this.renderer.addClass(this.el.nativeElement, 'dynamic-content');
this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '');
this.renderer.appendChild(this.el.nativeElement, this.createContainer(dynamicContent));
}
private createContainer(content: string): HTMLElement {
const container = this.renderer.createElement('div');
this.renderer.setProperty(container, 'innerHTML', content);
return container;
}
}
标签来插入动态内容。
动态内容示例
这是一段动态内容。
在上述示例中,appDynamicContent
指令将保留在相关内容