时间戳

首页 > 解决方案 > 是否可以从组件/指令中修改 ng-content

angular - 是否可以从组件/指令中修改 ng-content

问题描述

<ng-content>是否可以从组件或指令中附加到？

我目前正在尝试设置一个管道，该管道允许指令将文本节点附加到转入内容的开头。

<some-component appendContent="text to append">
    <div class="initial-content">test</div>
</some-component>

@Component({
    selector: 'some-component',
    template: `
        <div class="container">
            <ng-content></ng-content>
        </div>  
    `
})
export class SomeComponent {
}

@Directive({
    selector: '[appendContent]'
})
export class AppendContentDirective {
    @Input('appendContent') content: string;
}

我知道这ContentChildren允许我查询 中的内容ng-content，但我找不到任何有关附加元素以给出以下结果的方式的信息。

<div class="container">
    <div class="initial-content">test</div>
    <div class="appended-content">text to append</div>
</div>

堆栈闪电战： https ://stackblitz.com/edit/angular-cjquyz

您会注意到上面的 stackblitz 会生成：

<div class="appended-content">text to append</div>z
<div class="container">
    <div class="initial-content">test</div>
</div>

标签： angularangular-directive

解决方案

要附加一个 div，您可以使用 render2（而不是 insertAdjacentElement）。renderer.appendChild 需要一个元素引用，不使用 this.elementRef.nativeElement 否则 this.elementRef.nativeElement.firstChild

ngOnInit() {
    const contentElement = this.renderer.createElement('div');
    contentElement.classList.add('appended-content');
    contentElement.textContent = this.content;
    this.renderer.appendChild(this.elementRef.nativeElement.lastChild,contentElement)
  }

见stackblitz

推荐阅读