Question

是否可以从组件或指令中附加到<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>

stackblitz：https://stackblitz.com/edit/angular-cjquyz

您会注意到上面的堆栈闪电生成了：

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

Answer 1

要附加div，可以使用rendered2（而不是insertAdjacentElement）。 renderer.appendChild需要元素ref，请勿使用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.firstChild,contentElement)
  }

请参见stackblitz

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

1 个答案: