Javascript 在Angular中，如何从ng内容截取和更改内容？

在Angular中，如何通过ng内容截取组件内部的内容，并在呈现内容并添加到ng内容元素中之前对其进行更改

使用伪代码，这就是我想要实现的：

@component({
  selector: 'app-my-component',
  tempalte: 'My component content: <pre><code><ng-content></ng-content></code></pre>'
})
export class MyComponent {

  @NgContent() passedContent;

  constructor() {
    let txt = this.passedContent.nativeElement.innerHTML;
    txt = this.htmlEntities(txt);
    this.passedContent.nativeElement.innerHTML = txt;
  }

  htmlEntities() {
    // convert HTML code to HTML entities
  }

}

@组件({
选择器：“应用程序我的组件”，
tempalte:“我的组件内容：
”
<app-my-component ngNonBindable>
  <ul>
    <li *ngFor="let item of items">{{ item.name }}</li>
  </ul>
</app-my-component>

})
导出类MyComponent{
@NgContent（）passedContent；
构造函数（）{
设txt=this.passedContent.nativeElement.innerHTML；
txt=this.htmlEntities（txt）；
this.passedContent.nativeElement.innerHTML=txt；
}
htmlEntities（）{
//将HTML代码转换为HTML实体
}
}

---

其用途是：

  My component content: 
  <ul>
    <li *ngFor="let item of items">{{ item.name }}</li>
  </ul>

{{item.name}

---

最终结果将按原样显示代码：

我的组件内容：
<app-my-component ngNonBindable>
  <ul>
    <li *ngFor="let item of items">{{ item.name }}</li>
  </ul>
</app-my-component>


{{item.name}