在Angular中如何拦截和更改ng-content中的内容？

Question

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

使用假代码，这是我想要实现的目标：

@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
  }

}

用法是：

<app-my-component ngNonBindable>
  <ul>
    <li *ngFor="let item of items">{{ item.name }}</li>
  </ul>
</app-my-component>

最终结果将显示代码：

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