在Angular中，可以使用Renderer2来操作元素的属性和内容。以下是一个示例，演示如何从innerHTML中剥离数据属性：

首先，在组件中导入Renderer2：

import { Component, Renderer2, ElementRef } from '@angular/core';

然后，在组件的构造函数中注入Renderer2和ElementRef：

constructor(private renderer: Renderer2, private el: ElementRef) { }

接下来，可以使用Renderer2的setProperty方法来设置元素的属性。在ngOnInit生命周期钩子中，获取包含数据属性的元素，并剥离其中的数据属性：

ngOnInit() {
  const element = this.el.nativeElement.querySelector('.data-element');
  const innerHTML = element.innerHTML;
  
  // 提取数据属性
  const dataAttr = innerHTML.match(/data-\w+=".*?"/g);
  if (dataAttr) {
    dataAttr.forEach(attr => {
      const [name, value] = attr.split('=');
      this.renderer.setProperty(element, name, value.replace(/"/g, ''));
    });
  }
}

在上面的示例中，通过使用正则表达式和match方法，匹配包含"data-"前缀的属性。然后，使用setProperty方法将剥离出的属性设置到元素上。

最后，在组件的模板中，使用[innerHTML]绑定属性来动态渲染包含数据属性的HTML：

在组件中，可以定义一个名为dataHTML的属性，用于存储包含数据属性的HTML字符串。

请注意，由于使用了innerHTML属性，需要确保所插入的HTML是可信的，以避免潜在的安全风险。